⚓ 리액트 훅(React Hooks)

리액트 컴포넌트의 생명주기와 상태 관리를 직관적으로 만들어주는 훅(Hooks)에 대해 작성해 보겠습니다.

1. useState : 상태 관리의 시작

"상태 유지 값과 그 값을 갱신하는 함수를 반환합니다." 가장 기본적인 Hook으로, 컴포넌트 내에서 동적인 데이터를 다룰 때 사용합니다.

• 용도: 버튼 클릭 횟수, 입력창의 텍스트, 체크박스 상태 등 변경되는 데이터 관리.
• 특징: 상태가 업데이트되면 리액트가 해당 컴포넌트를 자동으로 다시 렌더링 합니다.

2. useEffect : 사이드 이펙트 처리

"명령형 또는 어떤 effect를 발생하는 함수를 인자로 받습니다." 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정합니다.

• 용도: API 데이터 호출, 타이머 설정, 외부 라이브러리 연동.
• 팁: 두 번째 인자인 의존성 배열([])을 통해 실행 시점을 세밀하게 조절할 수 있습니다.

3. useContext : 복잡한 Props 전달 해결

"Context 객체를 받아 그 Context의 현재 값을 반환합니다." 단계별로 Props를 넘겨주지 않고도(Prop Drilling 방지), 전역적인 데이터를 자식 컴포넌트에서 바로 꺼내 쓸 수 있습니다.

• 용도: 다크모드 테마 설정, 사용자 로그인 정보, 언어 설정 등.

4. useRef : 돔(DOM) 접근과 변수 유지

". current 프로퍼티로 초기화된 변경 가능한 객체를 반환하며, 전 생애주기 동안 유지됩니다." 화면을 다시 그리지 않으면서 데이터를 유지하고 싶거나, 특정 태그에 직접 접근할 때 사용합니다.

• 용도: 포커스 주기, 스크롤 위치 제어, 이전 상태 값 기억하기.

5. 성능 최적화의 단짝: useMemo & useCallback

리액트 앱이 무거워진다면 이 두 가지 메모이제이션(Memoization) Hook을 검토해야 합니다.

• useMemo: 메모이제이션된 '값'을 반환. 계산 비용이 큰 함수의 결괏값을 기억해 두고, 의존성이 바뀔 때만 다시 계산합니다.
• useCallback: 메모이제이션된 '콜백 함수'를 반환. 자식 컴포넌트에 함수를 넘겨줄 때, 불필요한 함수 재생성을 막아 렌더링 성능을 높입니다.

Hook 핵심 기능 비유

useState	데이터 저장 및 업데이트	컴포넌트의 메모장
useEffect	외부 시스템과 동기화	렌더링 후의 알림 서비스
useContext	전역 데이터 접근	공용 게시판
useRef	DOM 접근 및 변수 유지	보이지 않는 수납장
useMemo	복잡한 계산 값 재사용	계산기 결과 저장
useCallback	함수 재사용	자주 쓰는 레시피 보관

 

리액트 훅을 제대로 이해하면 코드의 가독성이 좋아질 뿐만 아니라, 성능까지 잡을 수 있습니다.

부족하지만 긴 글 읽어주셔서 감사합니다.

 

참고: https://ko.legacy.reactjs.org/docs/hooks-reference.html