[React] Section 14

리액트 훅은 클래스 기반 컴포넌트에서는 사용이 불가능하다.

 

render() 메소드는 리액트에 필요한 특정 메소드로 리액트가 jsx 코드 안에 컴포넌트가 사용된 것을 확인하면 그때 호출하는 메소드이다.

함수형 컴포넌트에서의 return 문과 동일하다.

render()메소드는 props를 받지 않는다.

 

클래스 기반 컴포넌트는 함수형 컴포넌트와 함께 작업이 가능하다.

 

class Users extends Component {
  toggleUsersHandler() {
    
  }
  render() {
  ...
  }
  }

 

-> 클래스 기반 컴포넌트에서 함수를 선언하는 보편적인 방법

 

클래스 컴포넌트에서 상태를 정의할 때는 constructor를 사용한다.

constructor에서는 상태 초기화 같은 초기화 작업을 할 수 있다.

 

클래스 컴포넌트에서 state는 항상 객체 형태이다.

무조건적으로 컴포넌트를 구성하는 모든 상태를 하나의 객체로 만들어야 한다.

 

setState 역시 항상 객체를 사용한다.

 

 toggleUsersHandler() {
    // this.state.showUsers = false // 이렇게 하면 안됨!
    this.setState((curState) => {
      return {showUsers : !curState.showUsers}
    });

  }

 

-> 반환되는 것은 기존 상태와 결합된 것!!!

-> 두번째 상태값이 손실되지 않는다.

 

컴포넌트 생명주기

특정 메소드를 통해 생명주기가 다른 2개의 클래스 컴포넌트를 서로 다른 시점에서 추가할 수 있다.

componentDidMount()

컴포넌트가 마운트 된 직후에 리액트가 이 메소드를 호출한다. (컴포넌트가 평가되고 DOM에 렌더링 될 때)

-> useEffect()를 사용한 것과 같다.

-> useEffect()를 빈 의존성 배열과 함께 추가한다면 이와 같은 역할을 수행한다.

 

componentDidUpdate() 

컴포넌트가 갱신되면 호출된다.

컴포넌트가 재평가, 재 렌더링 되면 그 때 호출된다.

-> 의존성 배열이 있는 useEffect()와 동일하다.

 

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

 

-> componentDidUpdate에서는 무한루프 방지를 위해 조건문을 사용해야 한다.

 

componentWillUnmount()

컴포넌트가 DOM에서 삭제되기 직전에 호출된다.

useEffect()에 있는 cleanup 함수와 같다.

-> cleanup 함수는 effect 함수가 다시 실행되기 직전에 호출되며, 항상 컴포넌트가 DOM으로부터 삭제되기 전에 다시 호출된다.

 

class User extends Component {
  componentWillUnmount() {
    console.log("User will unmount!");
  }
  ...
}

 

-> componentWillUnmount()가 3번 호출되는 이유 : User 컴포넌트를 3번 사용했기 때문에

 

클래스 컴포넌트 및 컨텍스트

Consumer는 함수형과 클래스형 컴포넌트 모두에서 사용 가능하다.

class UserFinder extends Component {
	static contextType = UserContext;
    ...
    // ex) this.context.users 로 사용!!
    ...
}

 

-> 컴포넌트에 2개 이상의 컨텍스트를 연결해야 한다면 제약조건이 있다...(함수형에 비해 유연함 떨어짐)

 

오류 경계

componentDidCatch()

어느 클래스 컴포넌트에도 추가할 수 있으며 컴포넌트에 이를 추가하게 되면 클래스 컴포넌트를 오류 경계로 만들게 된다.

-> 오류 경계란 단어는 이런 생명주기 메소드를 갖는 컴포넌트를 지칭하는 용어

-> 하위 컴포넌트 중 하나가 오류를 만들거나 전달할 때 발동한다.

 

 각 오류마다 개별 오류 경계가 필요하다.

 

import { Component } from "react";

class ErrorBoundary extends Component {
  constructor() {
    super();
    this.state = { hasError: false };
  }
  componentDidCatch(error) {
    this.setState({ hasError: true });
  }
  render() {
    if (this.state.hasError) {
      return <p>Something went wrong!</p>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;