3) useReducer
useState와 역할은 비슷한데, useState가 제공하는 기능 이외에도 상태 업데이트 로직을 외부 함수로 분리할 수 있는 기능을 제공한다.
useState와 useReducer의 차이는 위 그림과 같다. 상태를 관리한다는 목적은 동일한데 상태를 업데이트하는 방법이 약간 다르다.
useReducer는 미리 정의된 reducer 함수에 action과 이전 상태값을 입력값으로 넣어서 새로운 상태를 계산한다는 차이점이다.
4) useRef
useRef는 특정 DOM에 접근하여 DOM 조작을 가능하게 하는 훅이다.
리액트 프로젝트에서도 특정 요소를 선택해야하는 상황이 생길 수 있는데 이러한 상황에서 useRef 함수를 사용할 수 있게 된다.
가장 큰 특징은 useRef는 따로 상태 변경 함수가 없고 직접 .current의 상태를 변경하기 때문에 변경 사항이 자동으로 브라우저 화면에 반영되지 않는다는 점이다.
하지만 컴포넌트 지역 변수와 다르게 useRef 상태는 컴포넌트가 언마운트될 때까지 유지되기 때문에, 여러 이유로 인해 해당 컴포넌트 render 함수가 실행되면 useRef 변경 사항이 화면에 반영될 수 있다.
{/* 변경 사항이 자동으로 화면에 반영된다. */}
<button onClick={() => setCount((prev) => prev + 1)}>
useState 상태 업데이트
</button>
{/* 변경 사항이 자동으로 화면에 반영되지 않는다. 상태는 유지된다. */}
<button onClick={() => reference.current++}>
useRef 상태 업데이트
</button>그래서 useRef는 주로 자동으로 화면을 렌더링하지 않아도 되는 상태를 관리할 때 사용한다.
화면 렌더링과 관련이 없는 상태를 useState로 관리하면 render 함수가 불필요하게 실행되기 때문이다.
참고:
마트 시식코너같은 저의 벨로그에 어서오세요.