이 주제를 한 문장으로 설명하면?

이 주제가 왜 중요한가?

관련 키워드

[React 컴포넌트 구조]

├── 함수형 컴포넌트
│   ├── useState (상태 관리)
│   ├── useEffect (Side Effect 처리)
│   ├── Custom Hook (로직 재사용)
│   └── Hooks 기반 구조

├── 클래스 컴포넌트
│   ├── state / props
│   ├── lifecycle methods
│   └── this 바인딩 문제

├── 클래스 컴포넌트의 한계
│   ├── 데이터 흐름 추적 어려움
│   ├── 로직 재사용 문제
│   ├── Wrapper Hell (HOC / Render Props)
│   └── 코드 복잡도 증가

└── Hooks 등장
    ├── 상태 관리 단순화
    ├── 로직 재사용 개선
    └── 함수형 컴포넌트 표준화

개념정리

1. 클래스형 컴포넌트

참고 : https://ko.javascript.info/class

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.

클래스형 컴포넌트의 상태관리

• state

  this.state 를 통해 상태를 관리하고, this.setState() 메소드를 통해 상태를 업데이트한다.

  따라서, setState()가 호출되면 컴포넌트가 리렌더링 된다.

• Props

  부모 컴포넌트에서 전달되는 데이터를 의미한다.

생명주기 메서드

[참고] 간단하게 보는 리액트 생명주기 이미지

1. 마운트
   • 컴포넌트가 마운팅(처음 생성)되는 시점
   • 대표적인 메서드

     constructor
     render
     componentDidMount

2. 업데이트
   • 이미 생성된 컴포넌트의 내용이 변경되는 시점
   • props나 state 가 변경될 때 발생한다.
   • 대표적인 메서드

   • shouldComponentUpdate
     render
     componentDidUpdate

3. 언마운트
   • 컴포넌트가 더이상 존재하지 않는 시점 (화면에서 제거되는 단계)

대표적인 생명주기 메서드

• render()
  • 유일한 필수 메서드이며, UI를 렌더링하기 위한 용도이다.
  • 항상 순수해야하며, 사이드이펙트를 유발하면 안된다.

    → 렌더함수 내부에서 this.setState를 호출하면 안됨

• componentDidMount()
  • 클래스형 컴포넌트가 마운트되고 준비가 되었을 때 즉, 컴포넌트가 화면에 나타난 직후 실행
  • 렌더함수와 다르게 setState로 state를 변경하는 작업이 가능하다.

    하지만, state를 다루는 것은 보통 생성자에서 하는것이 좋다.

  • API 호출, DOM 접근, 이벤트 리스너 등록 등 DOM에 의존적인 작업들을 하는 것이 좋다. (함수형의 useEffect(() => {}, [])와 매칭시켜 생각하자!)
• componentDidUpdate()
  • 컴포넌트가 업데이트(Props/State 변경)된 직후 바로 실행된다.
  • 반드시 prevProps, prevState와 비교하는 조건문을 써야 한다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

클래스 컴포넌트의 한계

1. 데이터 흐름 추적이 어렵다

2. 로직 재사용이 어렵다

1. HOC (Higher Order Component) 고차컴포넌트 .. 간단하게 말하면 특정 컴포넌트를 받아 새로운 컴포넌트를 반환하는 개념
2. Render Props 함수를 직접 props 로 전달하는 패턴

   <DataFetcher
   	  render={(data) => (
   	    <div>{data}</div>
   	  )}
   	/>

3. 컴포넌트가 지나치게 커진다

4. this 바인딩 문제

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count

5. 번들 크기 최적화가 어렵다

prototype
constructor
lifecycle methods

6. 핫 리로딩(Hot Reloading)에 불리하다

2. 함수형 컴포넌트

function FunctionComponent(props) {
  return <div>{props.name}</div>;
}

상태 관리

import React, { useState } from 'react';

function FunctionComponent(props) {
  const [count, setCount] = useState(0);

  const

생명주기 처리 (useEffect)

• 데이터 fetching
• 이벤트 등록
• 타이머 실행
• DOM 조작

import { useEffect } from"react";

useEffect(() => {
	console.log("component mounted");
	
	return () => {
		console

함수형 컴포넌트의 특징

• 문법이 간단함
  • 클래스형에서 쓰이는 클래스 선언이나 this 바인딩 등이 필요 없다
• Hooks를 이용한 상태 관리
  • useState, useEffect, useMemo, useCallback 등
• 로직 재사용이 쉬움
  • Custom Hook을 이용하여 공통 로직을 재사용할 수 있다
• 현재 React 공식 권장 방식
  • React 공식 문서에서도 함수형 컴포넌트를 기본으로 권장하고 있다

3. 함수 컴포넌트 vs 클래스 컴포넌트

1) 생명주기 관리 방식

componentDidMount
componentDidUpdate
componentWillUnmount

useEffect

2) 렌더링 시 값의 처리 방식

함수 컴포넌트

클래스 컴포넌트

함수 컴포넌트와 클래스 컴포넌트 간단 비교

클래스 컴포넌트는 어디에 ..?!

Error Boundary

classErrorBoundaryextendsReact.Component {
  componentDidCatch(error,info) {
		console.error(error)
  }

  render() {
		returnthis.props.children
  }

면접 질문

Q1. 클래스형 컴포넌트와 함수형 컴포넌트의 가장 큰 차이점은 무엇인가요?

Q2. 함수형 컴포넌트에서는 Lifecycle을 어떻게 처리하나요?

Q3. 클래스 컴포넌트의 단점은 무엇인가요?

Q4. React에서 Hooks가 등장한 이유는 무엇인가요?