리액트 State Hook과 상태, 생명주기

 

 

들어가며

앞서 소개했다시피 React는 선언형(Declarative UI) 프로그래밍 구조입니다. 이는 UI를 어떻게 변경할지가 아니라 어떤 모습일지로 정의합니다. 어떤 모습일지에 대한 state만 관리하면 React가 알아서 화면을 업데이트해줍니다. 따라서 리액트 개발할 때는  UI Component의 상태를 관리하고 조작하는데 온 신경을 쓰면 됩니다. 그리고 React의 Hook은 함수형 컴포넌트에서 상태(state)와 라이프사이클(lifecycle)을 다룰 수 있게 해주는 기능입니다. 

 

1. useState – 상태(State) 관리

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);  // 초기값 0

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

동작 원리

1. useState(0) → count = 0으로 초기화.
2. setCount 호출 시 React가 상태를 업데이트 + 컴포넌트 리렌더링.
3. 새로 렌더링될 때 count는 최신 값으로 반영됨.

특징

• 상태가 변하면 화면이 자동으로 다시 그려짐.
• 한 컴포넌트 안에 여러 개의 상태를 가질 수 있음.

const [name, setName] = useState("Jisang");
const [age, setAge] = useState(30);

---

 

2. useEffect – 부수효과(Side Effect) 처리

기본 설명

React 컴포넌트는 기본적으로 렌더링 → 화면 표시까지만 담당합니다.

그 외에:

• 데이터 가져오기 (API 요청)
• DOM 직접 조작
• 타이머 설정

등은 **부수효과(= side effect)**라고 부릅니다. 이것을 처리하는 Hook이 useEffect입니다.

import { useState, useEffect } from "react";

function Timer() {
  const [count, setCount] = useState(0);

  // count가 바뀔 때마다 실행됨
  useEffect(() => {
    console.log("count가 변경되었습니다:", count);
  }, [count]);

  return (
    <div>
      <p>{count}초</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

useEffect 구조

useEffect(() => {
  // 실행할 코드
  return () => {
    // cleanup (정리 작업)
  };
}, [의존성배열]);

• [] (빈 배열): 마운트될 때 1번만 실행 (ex: API 호출)
• [count]: count가 바뀔 때마다 실행
• 생략 시: 매 렌더링마다 실행(⚠️빈 배열과 생략은 다름 주의!)

예: 마운트 시 API 호출

useEffect(() => {
  fetch("/api/data")
    .then(res => res.json())
    .then(data => console.log(data));
}, []);   // 처음 한 번만 실행

예: 타이머 설정 & 정리

useEffect(() => {
  const timer = setInterval(() => {
    console.log("1초마다 실행");
  }, 1000);

  return () => clearInterval(timer);  // 언마운트 시 정리
}, []);

의존성 배열

Effect 안에서 참조하는 모든 외부 값(변수, 함수)은 의존성 배열에 포함해야 한다

여기서 외부 값이란:

• props
• state
• 컴포넌트 바깥에서 선언/정의된 변수, 함수(useCallback으로 감싸지 않았다면 매 렌더마다 새로 생성됨)

리엑트는 이벤트로 인해 re-rendering을 많이 합니다. re-rendering시 특정 값의 변경이 있는 경우 실행되는 Hook이 useEffect입니다. 만약 의존성 배열에 필수로 들어가야 하지만 안들어가게 되는 경우에는 어떻게 되는지 살펴봅시다.

• 의존성 배열에 필요한 변수가 안들어간 경우
  • re-rendering 시 해당 변수가 변경되었음에도 useEffect 함수가 실행되지 않아서 업데이트가 되지 않음
• 의존성 배열에 필요한 함수가 안들어간 경우
  • 컴포넌트 내부에서 선언된 함수를 useEffect에서 사용하지만 의존성 배열에 넣지 않으면, re-rendering 할 때마다 함수가 새로 만들어짐 → 필수
  • 컴포넌트 바깥에 선언된 유틸 함수라면 의존성 배열에 넣을 필요 없음

 

정리된 규칙

1. Effect 안에서 쓰는 모든 변수/함수를 의존성 배열에 넣는다.
2. 다만, 불변(immutable) 보장되는 것은 생략 가능.
   • 예: import한 외부 함수, 상수, ref (useRef로 선언된 변수)
3. 함수가 매번 새로 생성되는 구조라면 → useCallback으로 감싸고 넣는다.
4. 컴포넌트 외부에 정의된 함수는 의존성 배열에 넣더라도 함수 참조가 변하지 않으므로 사실상 []와 동일하게 동작한다(항상 같은 참조라서).
5. useEffect에서 리턴하는 함수는 컴포넌트 언마운트될 때 호출됨.
6. ESLint의 react-hooks/exhaustive-deps 규칙을 기본으로 따르는 게 안전.

 

3. useCallback

개념

• 특정 함수를 메모이제이션(caching)하는 Hook
• 의존성이 바뀌지 않는 한 같은 함수 객체를 재사용
• 즉, 불필요한 re-rendering 방지 목적에서 사용됨
• comst memoizedCallback = useCallback(콜백 함수, 의존성 배열);
• 의존성 배열에 들어가있는 변수가 변했을 경우에만 콜백 함수를 다시 정의해서 리턴함

예시

import React, { useState, useCallback } from "react";

function Child({ onClick }: { onClick: () => void }) {
  console.log("Child 렌더링");
  return <button onClick={onClick}>Click</button>;
}

export default function Parent() {
  const [count, setCount] = useState(0);

  // ✅ count가 바뀔 때만 새로운 함수가 생성됨
  const handleClick = useCallback(() => {
    setCount((c) => c + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
    </div>
  );
}

만약 useCallback을 사용하지 않으면 Parent가 리렌더링 될 때마다 handleClick 함수가 새로 생성됩니다. count가 바뀌지 않는 한 handleClick은 새롭게 만들 필요가 없기 때문에 useCallback으로 재사용합니다. 그리고 count가 바뀔 때만 새로운 함수가 생성되도록 합니다.

 

4. useMemo

개념

• 메모이제이션된 value를 리턴하는 훅
• 연산량이 높은 작업이 매번 렌더링될 때마다 반복되는 것을 피하기 위해 사용
• const memoizedValue = useMemo(값 생성 함수, 의존성 배열)
• 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 값 생성 함수를 호출하여 결괏값 반환

예시

const memoizedValue = useMemo(() => {
  return complexCalculation(a, b);
}, [a, b]);

 

useMemo vs useCallback

구분	useMemo	useCallback
메모이제이션 대상	값 (Value)	함수 (Function)
반환값	계산된 결과값	함수 자체
주요 목적	무거운 계산 결과 캐싱	함수 재생성 방지
사용 예시	const list = useMemo(() => items.filter(...), [items])	const onClick = useCallback(() => setCount(c+1), [c])

• 계산 결과를 캐싱하고 싶다 👉 useMemo
• 함수 자체를 캐싱하고 싶다 👉 useCallback

 

5. useRef

개념

• mutable한 값을 저장하는 Hook
• .current 프로퍼티로 접근
• 컴포넌트가 re-rendering되더라도 같은 레퍼런스 객체를 반환
• const refContainer = useRef(초기값);

예시

1. DOM 요소 직접 접근

function InputFocus() {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    inputRef.current?.focus(); // DOM 요소 직접 접근
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus</button>
    </>
  );
}

2. 렌더링과 무관한 값 저장

function Timer() {
  const intervalRef = useRef<number | null>(null);

  useEffect(() => {
    intervalRef.current = window.setInterval(() => {
      console.log("tick");
    }, 1000);

    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, []);

  return <p>Timer Running...</p>;
}

3. 상태 변경 없이 값 기억하기

function Example() {
  const renderCount = useRef(0);
  renderCount.current += 1;

  return <p>렌더링 횟수: {renderCount.current}</p>;
}

 

---

 

정리

React 코드에서 Hook을 볼 때 useState를 만나면 어떤 상태를 관리하는지 확인해보면 좋을 것 같습니다. 그리고 useEffect는 어떤 부가효과를 실행하는지, 그리고 의존성 배열이 무엇인지를 확인하면 UI를 체크할 때 도움이 될 것 같습니다. 그리고 Hook자체는 함수형 컴포넌트에서 상태와 생명주기를 다루는 표준 방법이기 때문에 React에만 국한되는 개념은 아닙니다. 이벤트기반의 동작방식에서도 Hook을 통해 이벤트를 전달하거나 상태변화를 알리기도 합니다.

저도 아직은 State Hook이 익숙하지 않습니다. 다만 다양한 코드와 실행되는 UI를 보면서 익숙해지려고 하고 있습니다. 그래도 서버와 다르게 UI는 눈에 바로 보이기 때문에 익숙해지는데 오래걸리지는 않을 것 같습니다. React를 다루다가 헷갈리면 다시 와서 보고 익숙해지는 패턴을 반복해보겠습니다(Just do it).