초기 state 재생성 방지하기
React는 초기 state를 한 번 저장하고 다음 렌더링에서 이를 무시한다.
React에서 useReducer를 사용할 때 초기 상태를 설정하는 방법에는 두가지가 있다.
일반적으로 초기 상태를 두번째 인수로 직접 전달할 수 있지만, 초기 상태를 계산하는 함수가 무겁거나 복잡한 경우에는 세번째 인수로 초기화 함수를 전달하는 방법이 더 효율적이다. 이렇게 하면 초기 상태는 컴포넌트가 처음 렌더링될 때 한 번만 계산된다.
초기상태를 생성하는 함수 createInitialState , 이 함수는 초기 렌더링 시에만 호출되어야 하지만, 직접 초기 상태로 전달할 경우 모든 렌더링에서 호출될 수 있다. 특히 큰 배열을 생성하거나 복잡한 계산을 수행하는 경우 이는 성능에 영향을 미칠 수 있다.
이를 해결하기 위해 useReducer의 세번째 인수로 초기화 함수를 전달한다. 이렇게 하면 초기 상태는 컴포넌트가 처음 렌더링 될 때 한번만 생성된다.
createInitialState 함수는 초기 상태를 생성하기 위해 username 인수를 받는다. 그러나 초기 상태를 계산하기 위해 어떤 추가 정보도 필요하지 않은 경우, useReducer의 두번째 인수로 null 을 전달할 수 있다. 이는 useReducer의 세번째 인수로 초기화 함수를 전달할 때 유용하다.
- 초기 상태 계산 시 추가 정보 필요: useReducer(reducer, username, createInitialState)
- 초기 상태 계산 시 추가 정보 불필요: useReducer(reducer, null, createInitialState)