React 클래스 컴포넌트 핵심 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React 기초 학습자 및 리엑트 기반 프로젝트 개발자
- 클래스 컴포넌트 기반의 유산 코드베이스 작업자
- 난이도: 중급 (리엑트 핵심 개념 이해 필요)
핵심 요약
super(props)
는 React.Component의 생성자를 호출하여this.props
를 초기화할 때 필수- 함수형 컴포넌트 + Hooks는 현대 리엑트에서 우선적으로 사용되어야 하며, 클래스 컴포넌트는 유산 코드베이스에서만 사용
useEffect(() => {}, [dep])
는componentDidUpdate()
와 유사하지만, 의존성 배열을 통해 자동 변경 감지 가능
섹션별 세부 요약
1. `super()`의 필수성
super()
없이this.props
사용 시 "Must call super constructor..." 오류 발생super(props)
는this.props
에 접근 가능하게 함super()
없이 생성자 정의 시this.props
는undefined
2. 클래스 vs 함수형 컴포넌트 비교
- 함수형 컴포넌트:
super()
또는 생성자 필요 없음 - 클래스 컴포넌트:
constructor(props)
에서 반드시super(props)
사용 - Hooks 기반 함수형 컴포넌트가 더 간결하고 유지보수가 용이함
3. `useEffect` vs `componentDidUpdate`
useEffect(() => {}, [count1, count2])
는 의존성 배열을 통해 자동 변경 감지componentDidUpdate()
는 수동으로 prevState와 비교해야 함useEffect
는 초기 렌더링 시 실행 X (의존성 존재 시)
4. 메모리 누수 방지 전략
setInterval
,setTimeout
, 이벤트 리스너, API 요청 등은 반드시 클린업 필요useEffect(() => { ... }, [])
로 컴포넌트 언마운트 시 자동 클린업 가능componentWillUnmount()
로 인터벌/리스너/요청 중단
결론
- 신규 프로젝트는 Hooks 기반 함수형 컴포넌트 사용 (간결성, 유지보수성)
- 유산 코드베이스에서는
super(props)
이해 필수 useEffect
의 의존성 배열과componentDidUpdate
의 수동 비교를 통해 변경 감지 로직 구현- 모든 비동기 작업/리스너는 반드시 클린업 함수로 종료 (메모리 누수 방지)