useReducer (2)

Useage

 

컴포넌트에 reducer 추가하기

컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer로 state를 관리한다.

 

reducer 함수는 현재상태 (state)와 액션(action)을 받아서 새로운 상태를 반환한다.

여기서 increment 와 decrement 두가지 액션을 처리하며, 각각 나이를 1씩 증가 또는 감소시킨다.

 

Mycomponent 함수는 useReducer 훅을 사용하는 React 함수형 컴포넌트 이다.

useReducer 훅은 { age:42}로 초기화된 상태와 상태를 업데이트 하는 dispatch 함수를 제공한다.

컴포넌트는 현재 나이를 표시하고, 나이를 증가시키는 버튼과 감소시키는 버튼을 렌더링한다.

 

화면에 표시되는 내용을 업데이트 하려면 사용자가 수행한 작업을 나타내는 객체, 즉 액션을 사용하여 dispatch를 호출한다.

 

 

리액트는 현재 state와 액션을 reducer함수에 전달한다. Reducer은 다음 state를 계산하고 반환한다. 리액트는 다음 state를 저장하고, 컴포넌트를 렌더링하고, UI를 업데이트 한다.

useReducer 훅을 사용한 상태관리와 액션 디스패치를 통한 상태 업데이트.

이렇게 함으로써 컴포넌트의 상태 관리 로직을 더 간결하고 명확하게 만들 수 있다.

 

useReducer는 useState와 매우 유사하지만 이벤트 핸들러의 state 업데이트 로직을 컴포넌트 외부의 단일 함수로 옮길 수 있다.

 

reducer 함수 작성하기

 

Reducer 함수 선언 방법

선언 후에 state를 계산하고 반환할 코드를 입력한다. 관례상 switch문으로 작성하는 것이 일반적이다. switch의 각 case에 대해 다음 state를 계산하고 반환한다.

 

incremented_age 액션타입을 처리하여 나이를 1 증가시킨다.

기존이름을 유지하고 나이를 1 증가시킨다.

changed_name 액션타입을 처리하여 이름을 변경한다.

새로운 이름으로 변경하고 기존 나이를 유지한다.

 

액션은 어떤 형태든 가질 수 있다. type프로퍼티는 reducer가 어떤 종류의 작업을 수행해야 하는지 식별하는 데 사용된다. 나머지 프로퍼티들은 reducer 함수가 다음 상태를 계산하는데 필요한 추가정보를 포함할 수 있고, 이 정보는 해당 액션의 의도나 변경 사항을 명확하게 설명하는 데 사용된다.

이러한 설계 접근 방식은 reducer 함수와 액션 객체 사이의 결합을 최소화하고, 상태관리를 더욱 투명하고 유연하게 만든다. reducer 함수는 가능한 한 순수함수로 유지하여 같은 입력에 대해 항상 동일한 출력을 생성하도록 보장한다. 이는 애플리케이션의 상태변화를 예측 가능하게 만들어 주어 유지보수와 디버깅을 더욱 쉽게 해준다

 

액션유형의 이름은 컴포넌트 내에서 지역적으로 정의되어야 한다. 한 컴포넌트 내에서 발생하는 다양한 상호작용은 각각 고유한 액션 유형을 가져야 한다. 

각 액션은 오직 하나의 상호작용만을 기술해야 한다. >>액션 객체가 어떤 일을 하는지 명확하게 정의해야 함. 

상태 state는 컴포넌트에서 관리하는 데이터로 일반적으로 객체나 배열의 형태를 가질 것이다. 각각 키나 인덱스는 상태의 특정 부분을 나타내며, 그에따라 해당 부분이 변경될 때 사용되는 액션도 명확하게 정의된다.