[React 완벽 가이드] Section 14: Class형 컴포넌트

본 포스트는 Udemy 리액트 완벽가이드 2024 를 듣고 정리한 내용입니다.

목차 🌳
1️⃣ 클래스 컴포넌트란? 그리고 왜 쓰는데요?
2️⃣ 어떻게 사용하는데요?
3️⃣ Error Boundaries

Class-based Components

📁 클래스 컴포넌트란? 그리고 왜 쓰는데요?

클래스 기반 컴포넌트란?👀
ES6 클래스 구문을 사용하여 컴포넌트를 그려내는 방법
(클래스는 리액트의 기능이 아니라, 모던 자바스크립트에 존재하는 기능)
class 내부에 render 메소드를 통해, 무엇이 스크린에 보여줄지를 정의함.
Class Component는 React의 라이프 사이클 메서드를 사용할 수 있으며, 상태(state)와 life Cycle(생명주기 메서드)를 사용

왜 만들어졌는데요?💬
(리액트 16.8 버전 이전) => React hook없이 함수 컴포넌트에서는 state 관리가 불가능했고, side Effect도 처리 못함. 그래서 클래스형을 통해 state 관리와, 생명 주기에 따라서 기능을 처리하기 위해서 사용됨!!
(16.8 이후) => React Hooks 도입됨! 그래서 그 이후로는 함수형 컴포넌트를 많이들 사용

• !!! Class 형 컴포넌트에서는 React hook 사용불가!!!하다는 말씀

요즘엔 다 함수형 컴포넌트를 쓰지만, 옛날 옛적에 써진 코드 이해할때를 위해 공부는 필수.
뭐 둘다 섞어써도 문제는 되지 않지만, 대개 클래스형 -> 함수형으로 이관하고 있음

📁 클래스 컴포넌트 어떻게 사용하는데요?

함수형 컴포넌트

import classes from './User.module.css';

const User = (props) => {
  return <li className={classes.user}>{props.name}</li>;
};

export default User;

⬇️⬇️⬇️⬇️⬇️⬇️ 클래스형으로 변환 ⬇️⬇️⬇️⬇️⬇️⬇️

기본적인 작성 방법📮
1️⃣ Component 를 상속받아 class 선언해주기
class 컴포넌트명 extends Component {}
2️⃣ render 메소드를 통해 화면에 그려낼 UI 그려내기
3️⃣ props 사용시, this.props로 받아올 수 있음

클래스형 컴포넌트

import { Component } from 'react';

class User extends Component {
      
  render() {
    return <li className={classes.user}>{this.props.name}</li>;
  }
}

State 사용 방법
1️⃣ constructor 안에 넣어서 state 선언하는 방법
this.state = {} 로 초기화하기

  constructor(props) {
    super(props); // 반드시 호출해야함

this.state = {
  showUsers: true,
};

2️⃣ constructor 없이 state 선언하는 방법
**`state = {}` ** 로 초기화하기
```jsx
  // 클래스 필드 문법을 사용한 state 초기화
    this.state = {
      showUsers: true,
    };

둘다 공통적으로 class 컴포넌트 안에서는, state를 객체로 선언해야 함

3️⃣ 사용할땐 this.state.상태명 으로 호출
class 내부에서 만들어진 함수 사용시에도, this.함수명 이렇게 써주기

    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler}>{this.state.showUsers ? 'Hide' : 'Show'} Users</button>
        {this.state.showUsers && this.state.usersList}
      </div>
    );

4️⃣ 상태 변경시엔,
객체형식: this.setState({상태명: 변경할 값}) 혹은
함수형식 : this.setState((prev) => {상태명: !prev.상태명 }) 와 같이 변경가능

ex

  constructor(props) {
    super(props);
    this.state = {
      showUsers: true,
    };
  }
  toggleUsersHandler = () =>  {
    this.setState((curState) => {
      return { showUsers: !curState.showUsers };
    });
  }
 // ... 생략

📁 life cycle 🔄 ✨

function component는 useEffect을 통해서 side Effect 를 처리
class component 는 life cycle (생명 주기) 메소드를 통해 이를 처리할 수 있음!

life cycle (생명 주기)란?

class형 component는 모두
여러 종류의 "생명 주기 메소드" 를 가지며, 이 메소드를 오버라이딩하여 특정 시점에 코드를 실행할 수 있도록 설정할 수 있다!

생명주기 메소드 종류 🍀
1️⃣ componentDidMount : 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때
useEffect(() => {}, [] ) 과 동일 (dep 빈배열)
2️⃣ componentDidUpdate : props 또는 state가 변경되면 갱신이 발생
useEffect(() => {}, [someValue] ) 과 동일 (someValue가 갱신되면 다시 실행)
3️⃣ componentWillUnmount : 컴포넌트가 DOM 상에서 제거될 때에 호출
useEffect(() => { return () => {...} }, []) 클린업 함수와 동일

ComponentDidUpdate 예시

  componentDidUpdate(prevProps, prevState) {
    if (prevState.searchTerm !== this.state.searchTerm) {
      this.setState({
        filteredUsers: DUMMY_USERS.filter((user) => user.name.includes(this.state.searchTerm)),
      });
    }
  }

// 위와 동일한 동작 -> with React Hook
//   useEffect(() => {
//     setFilteredUsers(DUMMY_USERS.filter((user) => user.name.includes(searchTerm)));
//   }, [searchTerm]);

근데, class 형에서 context 쓰고 싶으면요?

useContext로 function Component는 해결했는데 그냥 프롭스 드릴링 즐기나여?
그럴리가요 ~

Context.Consumer 사용하거나
static contextType 사용하기

static contextType

import UsersContext from '../store/users-context';
class UserFinder extends Component {
  static contextType = UsersContext;

  componentDidMount() {
    this.setState({ filteredUsers: this.context.users });
  }
}

📁 Error Boundaries

Error Boundaries 란?
특정 부분에서 발생하는 오류를 캡처하고 처리할 수 있도록 하는 특별한 component
오류가 발생했을때, 전체 애플리케이션이 중단되지 않고 graceful한 상태로 유지되도록 해줌
-> 컴포넌트의 오류를 포착하여 UI를 대체하거나 오류 메시지를 사용자에게 표시하는 데 사용
[사용자에게 친화적인 오류 메시지 표시 / 버그 리포팅 / 안전한 대체 UI 제공]

Error Boundaries는 두 가지 특정한 생명 주기 메서드를 사용하여 구현됨!!
그러니까!! Class 형 Component를 이용하여 그려내야 함

예시 Error Boundary

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor() {
    super();
    this.state = {
      hasError: false,
    };
  }
  componentDidCatch(error) {
    // try{
    // someCodeWhichMightFail()
    // } catch (err) {
    // handle error
    // }
    this.setState({
      hasError: true,
    });
  }

  render() {
    if (this.state.hasError) {
      return <p>Something Wrong</p>;
    }
    // children을 반환하는 이유는 오류 경계 컴포넌트를 보호할 컴포트를 두르는데 사용하기 때문!
    return this.props.children;
  }
}

export default ErrorBoundary;

Error Boundary 참고문서