useReducer 공식문서 스터디(1)

useReducer

useReducer는 컴포넌트 내에서 reducer 함수를 활용하여 상태를 관리할 수 있게 해주는React Hook 이다.

useState의 대안으로 사용되며, 복잡한 상태 로직을 다룰때나 다음 상태가 이전 상태에 의존할 때 특히 유용하다.

 

컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer 를 통해 state를 관리해라.

 

매개변수

• reducer : 상태가 업데이트 되는 방식을 지정하는 reducer 함수이다. 이 함수는 순수함수여야 하며, state와 액션을 인자로 받아들이고, 다음 상태를 반환해야한다.
• initialArg : 초기 상태가 계산되는 값이다. 이 값은 모든 유형의 값일 수 있다. 초기 상태가 이 값에서 어떻게 계산되는지는 다음 init 인자에 따라 달라진다.
• optional init : 초기 상태를 반환해야 하는 초기화 함수이다. 이 인자가 지정되지 않으면 초기상태는 initialArg로 설정된다. 그렇지 않으면 초기 상태는 init(initialArg)를 호출한 결과로 설정된다.

반환값

useReducer 는 정확히 두 개의 값을 가진 배열을 반환한다.

1. 현재상태, 첫 렌더링 시에는 init(initialArg) 또는 (init 이 없는 경우) initialArg로 설정된다.

2. 상태를 업데이트 하고 재렌더링을 트리거 할 수 있는 dispatch 함수이다.

 

주의사항

useReducer는 컴포넌트의 최상위 레벨 또는 다른 훅 내에서만 호출할 수 있다. 이는 리액트의 규칙으로, 반복문이나 조건문 내부에서는 호출할 수 없다. 만약 이런 경우에 useReducer를 사용해야 한다면 해당 로직을 새로운 컴포넌트로 추출하고 상태를 그 내부로 옮기는 것이 좋다.

 

Strict Mode에서는 reducer와 초기화 함수를 두 번 호출하여 의도치 않은 부수 효과를 찾아낸다.

이는 개발용으로만 적용되고, 프로덕션 환경에는 영향을 미치지 않는다. 만약 reducer와 초기화 함루가 순수함수로 구현되어 있다면, 이러한 호출이 로직에 영향을 주지 않는다.두번 호출 중 하나의 결과는 무시된다.

 

dispatch function

dispatch 함수는 useReducer로 생성된 상태를 업데이트 하고, 컴포넌트의 재렌더링을 트리거하는 데 사용된다. dispatch 함수에 전달되는 유일한 인수는 함수이다.

함수는 상태를 업데이트 하는 데 필요한 정보를 담은 JavaScript 객체이다. 이 객체는 보통 type 속성을 가지고있어서 reducer함수가 어떤 동작을 수행해야 하는지를 식별한다.

리액트는 useReducer 에서 사용하는 reducer 함수에 현재상태 (state)와 dispatch한 액션을 전달하고 이를 기반으로 다음 상태를 계산한다.

 

매개변수

action: 사용자가 수행한 작업을 나타내는 것으로, 어떤 데이터 유형이든 올 수 있다. 보통은 액션을 객체로 표현하며, 이 객체에는 작업을 식별하는 데 사용되는 type 속성과 추가 정보를 담은 다른 속성들이 선택적으로 포함될 수 있다.

 

반환값

dispatch 함수에는 반환값이 없다.

 

주의사항

dispatch 함수는 다음 렌더링에 대한 상태 변수만 업데이트 한다. 따라서 dispatch함수를 호출한 후에 상태 변수를 읽으면 , 호철하기 전의 이전 값이 여전히 반환된다.

새로 제공한 값이 현재 상태와 동일한 경우, 리액트는 컴포넌트와 그 자식들을 다시 렌더링 하지 않는다. 이는 최적화 과정으로 리액트는 여전히 결과를 무시하기 전에 컴포넌트를 호출할 수 있지만, 코드에는 영향을 미치지 않는다. 리액트는 object.js를 사용하여 값의 동등성을 확인한다.