React Hooks: useState, useContext, useRef 및 useEffect의 사용과 비교(useEffect 중심으로)
React에서 상태 관리하거나 사이드 이펙트를 다루는 상황이 매우 많습니다. 예전엔 Class 컴포넌트로 했었는데, 이제는 React Hooks 덕분에 함수형 컴포넌트에서도 쉽게 할 수 있게 됐다고 합니다. 이 글에서는 그런 Hooks들을 어떻게 쓰는지 간단하게 알아보겠습니다.
1. 함수형 컴포넌트의 주요 React Hooks
useState
useState는 컴포넌트의 로컬 상태를 관리하는 훅입니다. 초기값을 인자로 전달하고, 배열의 첫 번째 요소는 현재의 상태, 두 번째 요소는 해당 상태를 설정하는 함수를 반환합니다.
const [count, setCount] = useState(0);useContext
useContext는 React의 Context API를 사용하여 컴포넌트 트리 전체에 데이터를 제공하는 훅입니다. 이를 사용하면 prop drilling 없이도 깊게 중첩된 컴포넌트에 데이터를 전달할 수 있습니다.
const theme = useContext(ThemeContext);useRef
useRef는 컴포넌트 내의 DOM 요소에 접근하거나, 렌더링 사이에 값을 유지하고 싶을 때 사용하는 훅입니다. 이것은 .current 프로퍼티를 통해 변경 가능한 ref 객체를 반환합니다.
const inputRef = useRef(null);2. useEffect 훅
useEffect는 함수형 컴포넌트에서 side-effect를 관리하기 위한 훅입니다. 여러 라이프사이클 메서드를 대체할 수 있습니다.
2-1 Mounting & Unmounting
//Mounting & Unmounting
useEffect(() => {
// Mounting 해당하는 로직
return () => {
// Unmounting 해당하는 로직
}
}, []);2-2 Updating
//Updating
useEffect(() => {
// Updating에 해당하는 로직
//->props나 state의 특정 값에 따른 업데이트
});2-3 props나 state의 특정 값에 따른 업데이트
//props나 state의 특정 값에 따른 업데이트
useEffect(() => {
// 특정 prop이나 state 변경 시 수행되는 로직
}, [someProp, someState]);3. 함수형 컴포넌트와 Hooks의 결합의 장점
-
로직의 재사용: Custom Hooks을 만들어서 여러 컴포넌트에서 반복적으로 사용되는 로직을 쉽게 재사용할 수 있습니다.
-
코드 분리: 각 Hook은 독립적으로 동작하기 때문에, 서로 다른 사이드 이펙트나 상태 관리 로직을 분리하여 관리할 수 있어 유지 및 관리가 용이합니다.
-
성능 최적화: useMemo나 useCallback과 같은 Hooks을 사용하면 불필요한 렌더링을 피하고, 성능을 최적화할 수 있습니다.
결론:
-
useState, useContext, useRef와 같은 훅들은 명확한 사용 사례와 목적을 가지고 있습니다. 이들은 각각 상태 관리, 컨텍스트 사용 및 참조 생성에 특화되어 있습니다.
-
useEffect는 사이드 이펙트를 관리하는 데 유연하며, 다양한 라이프사이클 상황을 대응할 수 있습니다.
-
함수형 컴포넌트와 Hooks를 사용하면 컴포넌트 로직을 더 명료하고 재사용 가능한 형태로 나눌 수 있습니다.
