💡 요약: 리액트 개발의 필수 요소인
useState와 useEffect의 개념을 잡고,
실제 코드 예시를 통해 언제 어떻게 사용해야 하는지 명확하게 정리해
드립니다.
👋 리액트가 처음이라면 가장 먼저 마주하는 벽
React를 처음 공부하기 시작했을 때를 떠올려보면, 컴포넌트까지는 이해가
갔는데 State(상태) 관리와
LifeCycle(생명주기) 개념에서 막혔던 기억이 납니다.
"도대체 변수를 그냥 쓰면 되지 왜 굳이 State를 써야 하지?" 혹은
"useEffect는 언제 실행되는 거야?"라는 의문, 한 번쯤 가져보셨을 겁니다.
하지만 걱정하지 마세요.
이 두 가지 Hooks만 제대로 이해해도 리액트 개발의 80%는
해결된다고 봐도 무방합니다.
오늘 이 글을 통해 복잡해 보이는 개념을 아주 직관적으로, 5분 안에 머릿속에
넣어드리겠습니다.
1️⃣ useState: 컴포넌트의 기억 장치
useState는 쉽게 말해 컴포넌트가 무언가를 '기억'하게
만드는 도구입니다.
일반 변수는 함수가 끝나는 순간 사라지지만, State는 리액트가 따로
저장해두기 때문에 화면이 다시 그려져도 값이 유지됩니다.
📌 기본 문법 해부하기
// 1. count: 현재 상태 값 (읽기 전용)
// 2. setCount: 상태를 변경하는 함수 (쓰기 전용)
// 3. 0: 초기값
위 코드는 "count라는 변수를 0으로 시작할 건데, 나중에 바꿀 때는 setCount를
쓸 거야"라고 선언하는 것입니다.
여기서 가장 중요한 포인트는 데이터의 불변성입니다.
우리는 count = 1 처럼 직접 값을 수정하지 않고, 반드시
setCount(1) 처럼 함수를 통해 값을 변경해야 합니다.
그래야 리액트가 "아! 값이 바뀌었구나, 화면을 다시
그려야지(Re-rendering)"라고 인식하기 때문입니다.
State 변경 함수(setState)는 비동기적으로 동작할 수 있습니다.
따라서 변경 직후에
console.log를 찍으면 이전 값이 나올 수도
있다는 점을 명심해야 합니다.2️⃣ useEffect: 타이밍의 마법사
useEffect는 컴포넌트가 렌더링 된 '이후'에 특정 작업을
수행하도록 설정하는 Hook입니다.
주로 서버에서 데이터를 가져오거나(API 호출), 이벤트를 등록할 때
사용합니다.
이 Hook의 핵심은 의존성 배열(Dependency Array)을 어떻게
설정하느냐에 따라 실행 시점이 달라진다는 것입니다.
📊 의존성 배열에 따른 실행 시점 비교
| 배열 형태 | 실행 시점 | 비고 |
|---|---|---|
useEffect(() => {}, [])
|
최초 마운트 시 1회만 실행 | API 호출 시 주로 사용 |
useEffect(() => {}, [value])
|
마운트 시 + value가 바뀔 때마다 실행 | 특정 값 감지 |
useEffect(() => {})
|
모든 렌더링마다 실행 | 사용 주의 (성능 저하 위험) |
특히 useEffect 내부에서 return을 통해 함수를
반환하면, 컴포넌트가 사라질 때(Unmount) 실행됩니다.
이를 Clean-up 함수라고 부르며, 메모리 누수를 방지하기
위해 이벤트 리스너를 제거하거나 타이머를 해제할 때 필수적입니다.
3️⃣ 두 가지를 한 번에 사용하는 패턴
이제 useState와 useEffect를 조합하여
간단한 타이머를 만들어 보겠습니다.
이 패턴은 실무에서 데이터를 주기적으로 갱신하거나, 사용자 입력을
디바운싱(Debouncing) 할 때 자주 응용됩니다.
✅ 실전 코드 포인트
- ✔️ State로 시간을 저장합니다.
- ✔️ useEffect로 1초마다 실행되는 인터벌을 설정합니다.
- ✔️ Clean-up 함수로 컴포넌트가 사라질 때 인터벌을 정리합니다.
처음에는 이 흐름이 낯설 수 있지만, "화면에 그려질 데이터는 State, 화면이
그려진 후 해야 할 일은 Effect"라고 단순하게 생각하면 훨씬 쉬워집니다.
이 두 가지만 확실히 잡아도 여러분은 리액트형 사고방식에 한 걸음 더
가까워진 것입니다.
📝 마무리하며
오늘은 리액트 개발의 알파이자 오메가인 useState와
useEffect에 대해 알아보았습니다.
이 두 가지 훅은 마치 요리의 '칼'과 '불'처럼 가장 기본적이면서도 강력한
도구입니다.
이론만으로는 부족하니, 지금 바로 코드 에디터를 열고 간단한 카운터나 시계를
직접 만들어 보시는 것을 추천합니다.
댓글 쓰기