React 초보 탈출! useState, useEffect로 컴포넌트 상태와 생명주기 완벽하게 다루기

 

 

React에서 컴포넌트의 상태를 관리하고,

특정 시점에 동작을 처리하려면 **Hooks(훅)**를 사용해야 합니다.
이번 포스팅에서는 그중에서도 가장 기초이면서 중요한 useState와 useEffect의

원리와 활용법을 예제 중심으로 알아보겠습니다! 🔍

---

🧠 1. useState란?

useState는 컴포넌트 내에서 **상태(state)**를 생성하고 관리하는 Hook입니다.

 

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // 상태 생성

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
};

 

구성요소	설명
count	현재 상태 값
setCount	상태를 업데이트하는 함수
useState(0)	초기값 설정

🟡 컴포넌트가 다시 렌더링될 때 count 값은 유지됩니다.

---

🌀 2. useEffect란?

useEffect는 컴포넌트의 **생명주기(lifecycle)**에 따라 특정 코드를 실행할 수 있도록 도와줍니다.

 

import { useEffect } from 'react';

useEffect(() => {
  console.log("컴포넌트가 마운트됨!");
}, []);

📦 주요 패턴

목적	코드 예시
마운트 시 1회 실행	useEffect(..., [])
특정 값 변경될 때 실행	useEffect(..., [value])
언마운트 시 정리 함수	return () => { ... }

 

---

🔄 예제: API 호출 후 데이터 렌더링

 

const [data, setData] = useState([]);

useEffect(() => {
  fetch('https://api.example.com/items')
    .then(res => res.json())
    .then(setData);
}, []);

 

🟢 외부 API를 처음 마운트 시 1회 호출하고, 결과를 상태에 저장하는 패턴입니다.

 

---

💡 실무 팁

• ✅ 상태 값이 객체/배열인 경우 불변성 유지에 주의하세요 (...spread 연산자 사용)
• ✅ useEffect 안에서 비동기 함수를 직접 사용하지 말고, 내부에 async 함수를 선언해 사용하는 것이 좋습니다

 

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch(...);
    const data = await res.json();
    setData(data);
  };

  fetchData();
}, []);

 

---

❗ 자주 하는 실수

실수	설명
useState로 배열/객체 다룰 때 직접 수정	→ 리렌더링 안 됨
useEffect 의존성 배열 빠뜨림	→ 무한 루프 가능성
비동기 함수 직접 useEffect에 사용	→ 경고 발생 가능

 

---

📝 마무리 정리

• useState → 상태 저장, 업데이트
• useEffect → 생명주기 이벤트 (마운트, 업데이트, 언마운트 등)
• 이 두 Hook만 잘 써도 대부분의 컴포넌트 기능 구현 가능!