혜심 블로그

프론트엔드

React Hooks 딥다이브

혜심
50 조회

React Hooks 딥다이브

useState와 useEffect의 이해

React Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능입니다.

useState

const [state, setState] = useState(initialState);

useState는 가장 기본적인 Hook으로, 컴포넌트에 로컬 상태를 추가할 수 있게 해줍니다.

useEffect

useEffect(() => { // 사이드 이펙트 수행 return () => { // 클린업 함수 }; }, [dependencies]);

useEffect는 컴포넌트의 생명주기와 관련된 작업을 수행할 수 있게 해줍니다.

커스텀 Hooks 작성하기

재사용 가능한 로직을 커스텀 Hook으로 분리하면 코드의 재사용성을 높일 수 있습니다.