React Hooks

곽민서·2026년 8월 24일

1. React Hooks란?

Hook이란 무엇인가?: Hook은 함수 컴포넌트에서 React의 다양한 기능을 사용할 수 있도록 해주는 기능이다.
- useState : 화면에 영향을 주는 상태를 저장한다.
- useEffect : 렌더링 이후 React 외부와 관련된 작업을 처리한다.
- useRef : 리렌더링 없이 값을 저장하거나 DOM 요소에 접근한다.
- useMemo : 계산된 값을 기억한다.
- useCallback : 함수 참조를 기억하여 필요할 때 같은 함수 참조를 재사용한다.
왜 Hooks를 사용하는가?: React 컴포넌트는 화면을 구성하지만, 단순히 화면만 보여주는 것 외에도 다양한 기능이 필요하다.
예)
- 사용자가 입력한 값을 저장하기
- 버튼 클릭에 따라 값을 변경하기
- API에서 데이터 가져오기
- 특정 HTML 요소에 접근하기
- 불필요한 계산이나 함수 생성을 줄이기
함수 컴포넌트와 Hooks의 관계: Hooks는 함수 컴포넌트 내부에서 React의 기능을 사용할 수 있도록 해준다. 즉, 함수 컴포넌트에서 상태를 관리하거나 렌더링 이후 특정 작업을 실행하기 위해 Hooks를 사용한다.

2. Hooks를 이해하기 전에 알아야 하는 개념

2-1. 컴포넌트

컴포넌트란 무엇인가?: 컴포넌트(Component)는 웹사이트의 화면이나 기능을 독립적인 단위로 나눈 것이다.
컴포넌트의 역할: 컴포넌트는 웹사이트를 여러 개의 독립적인 부분으로 나누어 관리할 수 있도록 한다.
컴포넌트를 사용하는 이유
- 코드 재사용: 한 번 만든 컴포넌트를 여러 곳에서 사용할 수 있다.
- 코드 관리: 웹사이트의 기능을 나누어 관리할 수 있어 코드가 길어지는 것을 줄이고 수정과 관리가 쉬워진다.

2-2. 함수 컴포넌트

함수 컴포넌트란?: 함수 컴포넌트(Function Component)는 함수를 이용하여 만든 React 컴포넌트이다. 일반적으로 JSX를 반환하여 화면을 구성한다.
function으로 선언하는 방법
화살표 함수로 선언하는 방법

2-3. State

State란?: State는 컴포넌트가 기억하고 관리해야 하는 값이다.
예) 좋아요 수, 로그인 여부, 검색어, 게시글 목록, 선택한 카테고리 등이 있다.
일반 변수와 State의 차이
- 일반 변수 변경 → 화면 업데이트 X
- State 변경 → 리렌더링 → 화면 업데이트
State가 필요한 이유: 웹사이트에서는 값이 변경되면 화면도 함께 변경되어야 한다. 따라서 화면에 영향을 주는 값을 관리하기 위해 State를 사용한다.

2-4. Props

Props란?: Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터이다.
부모 컴포넌트와 자식 컴포넌트: 다른 컴포넌트를 포함하거나 사용하는 컴포넌트를 부모 컴포넌트, 그 안에서 사용되는 컴포넌트를 자식 컴포넌트라고 한다.
Props를 이용한 데이터 전달: Props를 사용하면 부모 컴포넌트의 데이터를 자식 컴포넌트에게 전달할 수 있다. Props는 기본적으로 부모에서 자식 방향으로 전달된다.

2-5. 렌더링과 리렌더링

렌더링이란?: 렌더링(Rendering)은 React가 컴포넌트를 실행하고 화면에 표시할 내용을 준비하는 과정이다.
리렌더링이란?: 리렌더링(Re-rendering)은 컴포넌트가 다시 실행되어 화면에 필요한 변경 사항을 반영하는 과정이다.
어떤 경우에 리렌더링되는가?
- State가 변경되면 해당 컴포넌트가 리렌더링된다.
- Props가 변경되면 해당 Props를 받는 컴포넌트가 리렌더링될 수 있다.
- 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 기본적으로 리렌더링될 수 있다.
React.memo와 리렌더링
- React.memo를 사용하면 Props가 변경되지 않은 자식 컴포넌트의 불필요한 리렌더링을 줄일 수 있다.

3. useState

useState란?: useState는 컴포넌트의 State를 저장하고 관리하기 위한 Hook이다.
역할: State 값을 저장하고, 값이 변경되면 React가 화면을 업데이트할 수 있도록 한다.
기본 문법: const [state, setState] = useState(initialValue);
초기값: useState의 괄호 안에는 State의 초기값을 넣는다. ex) useState(0)→초기값은 0
상태 변경 방법: State는 값을 직접 변경하는 것이 아니라 Setter 함수를 사용하여 변경한다.
예) setCount(1)과 같이 Setter 함수를 사용하여 State를 변경한다.
State 변경과 리렌더링: State 변경 → 컴포넌트 리렌더링 → 변경된 화면 반영

4. useEffect

useEffect란?: useEffect는 컴포넌트 렌더링 이후 API 요청, 이벤트 등록, 타이머 설정 등 React 외부와 관련된 작업을 처리하기 위한 Hook이다.
역할
- API 요청
- 이벤트 등록
- 타이머 설정
- 외부 데이터와 연결
기본 문법: useEffect(() => { 실행할 작업 }, [dependencies]);
Dependency Array란?: Dependency Array는 Effect가 다시 실행될 조건을 관리하는 배열이다.
Dependency Array가 없는 경우: Dependency Array를 작성하지 않으면 렌더링이 완료될 때마다 Effect가 실행된다.
[]: 빈 배열을 전달하면 일반적으로 컴포넌트가 처음 화면에 나타난 후 Effect가 실행된다.
[value]: value가 변경되면 Effect가 다시 실행된다.
Cleanup: Cleanup은 useEffect에서 생성한 작업을 정리하기 위한 기능이다. 예를 들어 타이머나 이벤트 리스너를 제거할 때 사용할 수 있다.
API 요청과 useEffect: 컴포넌트 렌더링 → useEffect 실행 → API 요청 → 데이터 받기 → State에 데이터 저장 → 리렌더링 → 화면에 데이터 표시

5. useRef

useRef란?: useRef는 값을 저장하지만 값이 변경되어도 리렌더링을 발생시키지 않는 Hook이다.
역할
- 리렌더링 없이 값을 저장
- 특정 DOM 요소에 접근
기본 문법: const ref = useRef(initialValue);
.current: useRef로 생성한 Ref 객체의 값은 .current에 저장된다. 값을 읽거나 변경할 때 .current를 사용한다.
예)
값 저장: useRef에 저장된 값은 컴포넌트가 다시 렌더링되어도 유지된다.

하지만 .current의 값을 변경해도 화면은 다시 렌더링되지 않는다.

useState와 차이

	`useState`	`useRef`
값 저장	가능	가능
값 변경 시	Setter 함수 사용	`.current` 변경
값 변경 시 리렌더링	발생	발생하지 않음

DOM 접근: useRef는 특정 HTML 요소에 직접 접근할 때 사용할 수 있다. 예를 들어 input 요소에 포커스를 이동시키는 기능을 구현할 수 있다.

6. useMemo

useMemo란?: useMemo는 계산한 결과를 기억하는 Hook이다.
역할: 컴포넌트가 리렌더링될 때 불필요하게 같은 계산을 반복하지 않도록 도와준다.
기본 문법: const value = useMemo(() => { 계산하는 코드 }, [dependencies]);
계산 결과를 기억하는 이유: 컴포넌트가 리렌더링되면 컴포넌트 내부의 코드가 다시 실행될 수 있다. 계산 비용이 큰 작업을 매번 반복하면 성능에 영향을 줄 수 있기 때문에 useMemo를 사용하여 필요한 경우 이전 계산 결과를 재사용할 수 있다.
Dependency Array: Dependency Array에 있는 값이 변경되면 계산을 다시 실행한다. 값이 변경되지 않았다면 이전에 계산한 결과를 사용할 수 있다.
언제 사용하는가?
- 계산 비용이 큰 경우
- 같은 계산이 반복되는 경우
- 불필요한 계산이 반복되는 경우
무조건 사용하면 안 되는 이유: useMemo 역시 값을 기억하고 관리하는 과정이 필요하기 때문에 모든 값에 사용한다고 성능이 항상 향상되는 것은 아니다. 필요한 경우에 사용하는 것이 중요하다.

7. useCallback

useCallback이란?: useCallback은 함수 참조를 기억하는 Hook이다.
역할: 컴포넌트가 리렌더링될 때 함수가 불필요하게 새로 생성되는 것을 줄이는 데 사용할 수 있다.
기본 문법: const callback = useCallback(() => { 실행할 함수 }, [dependencies]);
Dependency Array: Dependency Array의 값이 변경되면 새로운 함수 참조를 반환하고, 변경되지 않았다면 이전 함수 참조를 유지한다.
함수를 기억하는 이유: 컴포넌트가 리렌더링되면 컴포넌트 내부에서 선언한 함수도 새로운 함수로 생성될 수 있다. 함수 참조가 변경되면 자식 컴포넌트의 Props가 변경된 것으로 판단될 수 있기 때문에 필요한 경우 useCallback을 사용한다.
React.memo와 관계: React.memo는 Props가 변경되지 않았을 때 컴포넌트의 불필요한 리렌더링을 줄이는 데 사용할 수 있다. 하지만 부모 컴포넌트가 리렌더링될 때마다 새로운 함수를 Props로 전달하면 함수 참조가 변경되어 자식 컴포넌트는 Props가 변경되었다고 판단할 수 있다. 이때 useCallback을 사용하여 함수 참조를 유지하면 React.memo와 함께 최적화에 도움이 될 수 있다.
언제 사용하는가?
- 함수를 자식 컴포넌트의 Props로 전달하는 경우
- React.memo를 사용하는 경우
- 동일한 함수 참조를 유지해야 하는 경우

8. useMemo와 useCallback 비교

Hook	기억하는 것
`useMemo`	계산된 값
`useCallback`	함수 참조

useMemo -> 값 기억
useCallback -> 함수 참조 기억

9. 전체 Hook 비교

Hook	주요 역할	리렌더링
`useState`	상태 관리	State 변경 시 발생
`useEffect`	렌더링 이후 작업 실행	직접 발생시키지 않음
`useRef`	값 저장, DOM 접근	발생하지 않음
`useMemo`	계산 결과 기억	직접 발생시키지 않음
`useCallback`	함수 참조 기억	직접 발생시키지 않음