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.propsundefined

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의 수동 비교를 통해 변경 감지 로직 구현
  • 모든 비동기 작업/리스너는 반드시 클린업 함수로 종료 (메모리 누수 방지)