🥯 애피타이저
안녕하세요. 이번 글은 useReducer를 간단하게 알아보겠읍니다.
피드백할 부분이 있다면 댓글로 알려주세요.
그럼 무한 감사를 드립니다.
🍖 메인
간단 소개
useReducer는 React의 훅(Hook) 중 하나로, 컴포넌트의 상태를 관리하기 위해 사용됩니다.
useReducer는 Redux와 비슷한 개념으로 동작하지만, Redux보다 더 간단하고 가볍게 사용할 수 있습니다.
문법
useReducer는 세 개의 인자를 받을 수 있습니다.
const [state, dispatch] = useReducer(reducer, initialArg, init);첫 번째 인자로 reducer 함수이고, 두 번째 인자로 initialArg(초기 상태), 세 번째 인자는 초기 상태를 반환해야 하는 초기화 함수입니다. 단, 세 번째 인자는 선택사항입니다.
reducer 함수는 이전 상태와 액션을 받아서 다음 상태를 계산하는 순수 함수입니다.
순수 함수란 동일한 매개 변수가 주어지면 항상 동일한 값을 반환하며, 부수 효과(Side Effect)가 없는 함수를 말합니다.
순수 함수는 누가 언제 실행시키든 항상 동일한 기능을 수행하기 때문에, 멀티스레드 환경에서든 비동기적인 상황에서든 언제나 안전하게 믿고 사용할 수 있습니다.
또한 재사용성이 좋고 유지보수 하기가 편리합니다.
initialArg는 초기 상태를 계산하는 데 사용되는 값입니다. 어떻게 계산되는지는 다음 인자로 오는 init에 따라 달라집니다.
init은 initialArg을 인자로 받으며, 초기 상태를 계산하는 함수입니다.
init이 지정되지 않은 경우, 초기 상태는 initialArg로 설정됩니다. 그렇지 않으면 초기 상태는 init(initialArg)를 호출한 결과로 설정됩니다.
반환
useReducer는 현재 상태와 dispatch 함수를 반환합니다.
현재 상태는 init함수를 받지 않은 경우엔 initialArg로 설정되고, 받았으면 init(initialArg)로 설정됩니다.
dispatch 함수는 유일한 인수인 action 객체를 받아서, 상태를 업데이트하고 다시 렌더링을 발생시킵니다.
action 객체는 type이라는 프로퍼티를 가지고 있으며, reducer 함수에서 이 값을 이용해 어떤 동작을 수행할지 결정합니다.
또한 데이터를 전달해 줄 프로퍼티를 선언해줄 수 있는데, 저는 보통 payload로 선언하고 데이터를 할당합니다.
하지만 굳이 payload란 이름을 쓰지 않아도 괜찮습니다.
그리고 dispatch 함수는 반환값이 없습니다.
dipatch 함수의 의해 현재 상태가 업데이트되면 이전 상태와 비교합니다.
비교했을 때 차이가 있다면 재렌더링이 발생합니다.
주의사항
useReducer는 훅이므로 컴포넌트의 최상위 수준 또는 사용자 고유의 훅에서만 호출할 수 있습니다.
루프나 조건문 내에서 호출할 수 없다는 뜻입니다.
Strict Mode에서 React는 우연한 에러를 찾기 위해 reducer와 초기화 프로그램을 두 번 호출합니다.
이는 개발 전용 동작이며 프로덕션에는 영향을 미치지 않습니다. reducer와 initializer가 순수하면 로직에 영향을 미치지 않아야 합니다. 두 호출 중 하나의 결과는 무시됩니다.
dispatch 함수는 다음 렌더링을 위한 상태 변수만 업데이트합니다.
dispatch 함수를 호출한 후 상태 변수를 읽으면 호출 전에 화면에 있었던 이전 값이 반환됩니다.
useReducer를 사용하면 좋은 경우
다수의 하위값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer가 좋습니다.
useReducer는 자세한 업데이트를 트리거하는 컴포넌트의 성능을 최적화할 수 있습니다. 왜냐하면 콜백 대신 dispatch를 전달하기 때문입니다.
React는 dispatch 함수의 동일성이 안정적이고 리렌더링 시에도 변경되지 않는 것을 보장한다고 합니다. 그래서 useEffect나 useCallback 혹의 의존성 목록에 dispatch를 포함하지 않아도 괜찮습니다.
🍨 디저트
간단한 정리가 끝났읍니다.
useReducer를 활용한 예제를 보고 싶으시면
여기를 참고해주시면 감사하겠습니다.
부족하고 또 부족한 글 읽어주셔서 감사합니다.
그래도 다음에 또 오세요.
참고
'React > Hooks' 카테고리의 다른 글
| useId를 간단하게 알아보자 (0) | 2023.08.15 |
|---|---|
| useMemo를 알아봅시다. (Feat. 예제) (0) | 2023.04.06 |
| useReducer로 초초초간단 TodoList 만들기 (6) | 2023.03.23 |
