[React] useState와 useReducer의 차이점
React의 Hook 기능
React v16.8에 새롭게 Hooks라는 기능이 도입되었다.
Hooks는 함수형 컴포넌트에 state를 제공함으로써 상태 관련 로직의 재사용을 이전보다 훨씬 쉽게 만들어준다.
Hook안에 useState와 useEffect가 있다.
useState
함수에 state를 제공합니다. initialState를 파라미터로 받고, state와 state를 변경할 setState 함수를 반환한다.
[첫번째 인자, 두번째 인자] 형태로 구현하고, 두 인자를 useState로 초기값을 준 다음, 두번째 인자를 활용하여 첫번째 인자의 값을 바꿔준다.
import { useState } from 'react';
const Example = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>{`count: ${count}`}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
};
export default Example;
해당 코드는 버튼을 눌렀을 때 setCount에 count+1을 해주는 것입니다. 즉, count의 숫자는 버튼을 누를때마다 1 증가한다.
setCount는 count state를 변경하면 렌더링이 다시 일어나는 형태이다.
**이때, 한 코드안에 setCount를 쓰고 여기서 console.log으로 count을 찍으면 값이 변하지 않고 초기값이 나온다.
**useState의 부족한 부분인 것 같은데, set인자를 사용하면 변한 인자를 사용하기 위해서는 set인자를 이용한 함수 부분에는 넣어주면 안된다.
useEffect
render가 발생할 때 마다(componentDidMount: 초기, componentDUpdate: 매번) effect가 실행된다.
두 번째 파라미터인 inputs를 통해 특정한 상태가 update 되었을 때만 effect가 실행되도록 설정할 수 있다.
아래 예시 코드이다.
useEffect(() => {
window.addEventListener("mousemove", logMousePosition);
return () => {
window.removeEventListener("mousemove", logMousePosition);
};
}, []);
해당 앞 부분 모두가 초기 함수이고 뒷부분 []이 input이다.
여기에서는 inputs로 빈 배열을 넘겨주었기 때문에 unmount 될 때 한 번만 실행된다.
useReducer
useState처럼 State를 관리하고 업데이트할 수 있는 hook
useReducer의 묘미 : 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것이 가능!
- useState 사용 : 컴포넌트 내부에 State 업데이트 로직이 존재
- useReducer : 컴포넌트 외부에 State 업데이트 로직이 존재! [Function 밖에서 꺼내써도 가능!]
useState와 useReducer의 차이점
useState :
- 관리해야 할 State가 1개일 경우
- 그 State가 단순한 숫자, 문자열 또는 Boolean 값일 경우
useReducer :
- 관리해야 될 State가 1개, 복수 일경우
- 유동적인 가능성이 있는 단일 State
- 스케일이 큰 프로젝트
- State의 구조가 복잡할 때
*** 결론 : 컴포넌트에서 dispatch 함수에 행동(action)을 던지면, reducer 함수가 이 행동(action)에 따라서 상태(state)를 변경해줍니다.
++추가로 정리 (예시부분도 다시 바꿔야됨)
dispatch함수 / action / userReducer함수 /
https://velog.io/@iamhayoung/React-Hooks-useReducer%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0
Comments