React - useReducer

useReducer

useState의 대체 함수이다.

(state,actioin) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환합니다.

 

많은 수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인경우에 보통

useState보다 useReducer를 선호한다. 또한 useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화 할 수

있게 해준다. 왜? --> callback 함수 대신에 dispatch를 전달 할 수 있기 때문에

 

예시) Counter 예시

state와 dispatch에 어떠한 값이 담길까? 라는 궁금증에 console.log를 통해 확인

state에는 initialState가 담겨있고, dispatch는 fiber,queue,action이라는 파라미터를 받는다. action이라는 파라미터를 받기때문에,

dispatch({type:'decrement'})와 같은 방식으로 사용해준다고 생각한다.

 

주의

React는 dispatch 함수의 동일성이 안정적이고 리렌더링 시에도 변경되지 않으리라는 것을 보장하기 때문에. useEffect나

useCallback 의존성 목록에 이 함수를 포함하지 않아도 된다.

 

State초기화 방법

useReducer state 초기화에는 두 가지 방법이 존재

 

(1) 초기 state를 두 번째 인자로 전달하는 것

주의

React에서는 Reducer의 인자로써 state = initialState와 같은 초기값을 나타내는, Redux에서 사용되는 보편화된 관습을 사용하지 않는다. 왜? 초기값은 때때로 props에 의존할 필요가 있어 Hook 호출에서 지정되기도 한다.

 

(2) 초기화를 지연하는 방법

초기 state를 조금 지연해서 생성할 수도 있다. 이렇게 하기 위해서는 init 함수를 세 번째 인자로 전달한다. 초기 state는 init(initialArg)에 설정될 것이다.

이렇게 해주면, reducer 외부에서 초기 state를 계산하는 로직을 추출할 수 있도록하고, 어떠한 action에 대한 대응으로 나중에

state를 재설정하는 데에도 유용하다.

 

dispatch의 회피

Reducer Hook에서 현재 state와 같은 값을 반환하는 경우 React는 자식을 리렌더링하거나 effect를 발생하지 않는다.

React --> Object.js 비교 알고리즘 사용

 

Object.is 비교 알고리즘이란? (MDN참조)

Object.is() 메서드는 두 값이 같은 값인지 결정한다.

 

구문

Object.is(value1,value2);

value1 = 비교할 첫 번째 값

value2 = 비교할 두 번째 값

 

반환 값

Boolean

 

true인 경우

둘다 undefined

둘다 null

둘다 true 또는 둘 다 false

둘다 같은 문자에 같은 길이인 문자열

둘다 같은 객체

둘다 숫자(둘다 +0, -0, NaN, 0이나 NaN이 아닌 같은 값)

 

'==' 와 '==='과 같은 방식으로 같음을 측정하지 않는다

(1) == --> "" == false --> true가 됨

(2) === --> -0 === +0 --> true / Number.NaN === NaN --> false