React에서 useReducer 초기값 문제 해결하기

문제 상황: 초기값이 제대로 적용되지 않음

StackOverflow에서 확인한 문제는 useReducer를 사용할 때 초기값이 제대로 설정되지 않는 경우입니다. 이 문제를 겪는 다수의 개발자들이 있을 것이며, 이 문제를 해결하는 방법에 대해 알아보겠습니다.

초기값이란 무엇인가?

초기값(initial state)은 리듀서 함수에서 사용되는 상태의 시작값을 말합니다. 이 값은 useReducer의 두 번째 인자로 전달됩니다.

원인: 자바스크립트 객체 참조

문제가 발생하는 주된 원인 중 하나는 자바스크립트의 객체 참조 방식 때문입니다. 객체를 초기값으로 사용할 때, 그 객체가 다른 곳에서 변경되면 useReducer의 초기값도 영향을 받게 됩니다. 객체 참조(reference)는 실제 객체의 위치를 가리키기 때문에, 다른 곳에서 해당 객체가 변경되면 초기값도 함께 바뀌게 됩니다.

해결책: 객체 복사 사용하기

객체의 참조 문제를 해결하기 위해, 초기값으로 객체를 전달할 때 깊은 복사(deep copy)를 사용하면 해결될 수 있습니다. 깊은 복사는 객체 안의 객체까지 새롭게 복사하는 것을 말합니다.

const initialState = JSON.parse(JSON.stringify(originalObject));

이렇게 하면 initialState는 원래 객체와 동일하지만, 별도의 참조를 가지므로 문제가 해결됩니다.

기타 고려사항: useEffect와 함께 사용

useEffect를 사용하여 컴포넌트가 마운트 될 때 초기 상태를 설정하는 방법도 있습니다. useEffect 내에서 dispatch 함수를 호출하여 초기 상태를 설정할 수 있습니다.

정리

useReducer에서 초기값 문제는 주로 자바스크립트의 객체 참조 때문에 발생합니다. 이를 해결하기 위해 깊은 복사를 사용하거나, useEffect를 활용하여 초기 상태를 설정하면 문제를 해결할 수 있습니다. 이렇게 해서 문제를 정확하게 진단하고 해결할 수 있으리라 생각합니다.