[React] React 완벽 가이드 섹션 13 클래스 컴포넌트

 

1. 클래스 컴포넌트

- 과거에 많이 사용한 컴포넌트 선언 방식

* React 16.8이전에는 사이드 이펙트(훅)를 다루기 위해서는 클래스 기반 컴포넌트를 사용했어야 했다.

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

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

- props는 this예약어를 사용해야하고, Component를 상속받아야 한다.

- render() 를 사용한다.

 

class Users extends Component {
  constructor(){
    super();
    this.state = {
      // 상태 조각과는 상관없이 state는 객체가 된다.
      showUsers: true,  
    }
  }
  toggleUsersHandler() {
    this.setState({showUsers: false}); // state 바꾸기

    this.setState((curState) => {
      return {showUsers : !curState.showUsers} //과거 값에 기반해 state 바꾸기
    })
  }
  render(){
    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler.bind(this)}> // 자바스크립트 방식
          {showUsers ? 'Hide' : 'Show'} Users
        </button>
        {showUsers && usersList}
      </div>
    );
  }
}

 

 

2. 클래스 컴포넌트 생명주기

- 클래스 기반 컴포넌트는 리액트 훅을 사용할 수 없다.

	클래스형	함수형
componentDidMount	컴포넌트가 마운트되고 dom에 랜더링 될때	useEffect(...,[])
componentDidUpdate	컴포넌트가 업데이트 될때	useEffect(...,[someValue])
componentWillUnMount	컴포넌트가 dom에서 삭제되기 직전에 호출	useEffect(()=>{return()=>{...}}, []} * cleanup 함수

 

 

3. 클래스 컴포넌트에서 Context 사용

class UserFinder extends Component {
  static contextType = UsersContext; //컨텍스트가 하나일때만.. 두개이상이면 이 방법 x
  
  // this.context.변수명 으로 접근가능
  ...
}

 

4. 함수형 컴포넌트에서 오류 경계

1) 오류 컴포넌트를 만든다

2) 오류가 날 컴포넌트를 감싸준다.

* Users 컴포넌트에서는 throw 문으로 error을 보낸다.

 

애플리케이션이 종료되지 않고 계속 실행하게 해준다.