이번에 React 공부하면서 가장 크게 이해가 정리된 부분이 두 가지였다.
하나는 단방향 데이터 흐름, 다른 하나는 컴포넌트의 마운트와 클린업(useEffect)이다.
겉으로 보면 단순한 개념인데, 직접 코드로 부딪혀보니까 생각보다 중요한 포인트들이 많이 숨어 있었다.
1. 단방향 데이터 흐름 – React의 기본 철학
React는 기본적으로 데이터가 위에서 아래로 흐르는 구조를 가진다.
부모 컴포넌트가 state를 가지고 있고, 그걸 자식에게 props로 내려준다.
function Parent() {
const [count, setCount] = useState(0);
return <Child count={count} onClick={() => setCount(count + 1)} />;
}여기서 중요한 점
- 데이터는 부모 → 자식
- 이벤트는 자식 → 부모 (콜백 함수 호출)
처음에는 “왜 이렇게 번거롭게 하지?” 싶었는데, 이 구조 덕분에 데이터 흐름이 항상 예측 가능해진다는 걸 느꼈다.
특히 디버깅할 때 “이 값 어디서 바뀌었지?”를 추적하기 쉬워진다.
2. 조건부 렌더링 = 컴포넌트 생명주기
라이프사이클은 다음과 같다
- 마운트 (Mount, 탄생): 컴포넌트가 페이지에 처음 렌더링될 때
- 업데이트 (Update, 갱신): State나 Props의 값이 바뀌거나 부모 컴포넌트가 리렌더해 자신도 리렌더될 때
- 언마운트 (Unmount, 사망): 더 이상 페이지에 컴포넌트가 렌더링되지 않을 때
이번에 가장 크게 깨달은 점
{count % 2 === 0 && <Even />}
이 한 줄이 단순한 조건문이 아니라,
- 짝수 → 컴포넌트 생성 (마운트)
- 홀수 → 컴포넌트 제거 (언마운트)
→ 즉, 렌더링 조건 자체가 생명주기를 결정한다
이걸 이해하고 나니까 React가 “컴포넌트 기반 UI”라는 말이 훨씬 와닿았다.
3. useEffect와 클린업 함수의 진짜 의미
처음에는 이 코드가 헷갈렸다.
useEffect(() => {
return () => {
console.log("Even 컴포넌트 언마운트");
};
}, []);“이게 왜 마운트냐 언마운트냐” 혼란이 왔는데, 핵심은
- useEffect 자체는 마운트 시 실행
- return 함수는 언마운트 시 실행 (cleanup)
즉,
→ 마운트할 때 “나중에 정리할 함수”를 등록해두는 구조
이걸 이해하고 나니까 흐름이 완전히 정리됐다.
언마운트 → cleanup 실행
4. 클린업 함수는 왜 존재할까
클린업 함수는 단순히 로그 찍는 용도가 아니라,
남아있는 작업을 정리하는 역할이다.
예를 들어:
- 이벤트 리스너 제거
- setInterval 정리
- API 요청 취소
이걸 안 하면 실제로 메모리 누수나 버그로 이어진다.
그래서 React는 아예 구조적으로
effect를 만들면 반드시 정리도 같이 생각해라
라는 패턴을 강제하고 있는 느낌이었다.
5. 이번에 느낀 핵심 요소
이번 학습에서 가장 좋았던 건
이 세 개가 따로 노는 개념이 아니라 하나로 연결된다는 것이었다.
- 단방향 데이터 흐름
- 조건부 렌더링
- useEffect + cleanup
상태(state)가 바뀌면
→ 렌더링 구조 변경
→ 컴포넌트 마운트/언마운트
→ 그에 따라 effect와 cleanup이 실행
6. 한 줄 정리
React는 단순히 UI를 그리는 라이브러리가 아니라,
상태 변화 → 컴포넌트 생명주기 → 부수 효과 관리까지 연결된 구조이다.