[React 공부] 클래스형 컴포넌트

회사에서는 기존 프로젝트를 유지보수하는 등의 상황이 생기면 클래스형 컴포넌트를 사용해야하는 경우가 있다.

요즘은 함수형 컴포넌트를 주로 사용하는 추세이지만, 그래도 공부해둘 필요가 있어보여 아래글을 따라가며 특징을 간단히 정리해보았다.

24. 클래스형 컴포넌트 · GitBook

 

---

- render() 메서드가 꼭 있어야 함 - 렌더링하고 싶은 JSX 반환하면 됨

- props 조회는 this.props로

- defaultProps는 함수형컴포넌트와 똑같이 해도 되고, 클래스 내부에 static 키워드와 함께 선언도 가능
static defaultProps = { name: ‘이름없음’ };

- 메서드: 클래스 내부에 종속된 함수.
클래스에서 커스텀 메서드를 만들게 될 때는 보통 이름을 handle… 이라고 지음. (단, 정해직 규칙은 아님)

- this는 컴포넌트 인스턴스를 가리켜야 함.

* 메서드를 이벤트로 등록하는 과정에서 메서드와 컴포넌트 인스턴스의 관계가 끊김

◈ 방지법 3가지

① 클래스 생성자 메서드 constructor 에서 bind 작업

constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
}

 

② [가장 일반적인 방법] 커스텀 메서드 선언 시 화살표 함수 문법 사용. 가장 편함.

handleIncrease = () = { … }

cra로 만든 프로젝트에는 클래스에 특정 속성을 선언할 수 있게 해주는 class-properties라는 문법 적용돼 있어 사용 가능

③ [비권장] onClick에서 새로운 함수를 만들어서 전달.
렌더링할 때마다 함수가 새로 만들어져서 나중에 컴포넌트 최적화하기 까다롭기 때문에 비권장

 

상태 선언

- constructor 내부에서 this.state 설정

constructor(props) {
   super(props);
   this.state = {
     counter: 0
   };
}

 

- state는 무조건 객체 형태여야 함

- render 메서드에서 state 조회하려면 this.state 조회

- class-properties 문법이 적용돼 있다면(cra) constructor 작성하지 않고 state 설정도 가능

state = { counter: 0 };

 

상태 업데이트

- this.setState 함수 사용

handleIncrease = () => {
    this.setState({
         counter: this.state.counter + 1
    })
}

 

객체 안에 업데이트 하고 싶은 값을 넣어 호출

- state에 다른 값이 있더라도, 파라미터에 넣는 객체에 해당 값을 넣어주지 않아도 값 유지됨.

- state에서 객체 형태의 상태를 관리해야 할 때는 불변성 관리하면서 업데이트 필요

 

setState의 함수형 업데이트

- useState에서처럼 함수형 업데이트 가능

handleIncrease = () => {
   this.setState(state => ({
      counter: state.counter + 1
   }));
};

 

* setState 안에서 함수로 최신 state를 업데이트해줘서 state를 사용할 때 this로 지정하지 않아도 된다.

 

LifeCycle Method(생명주기 메서드)

* 그렇게 중요하진 않음

- 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들.
컴포넌트에서 에러가 났을 때 호출되는 메서드도 있음

- useEffect와 비슷하다고 생각할 수 있음(작동방식은 다르고, 커버 불가한 기능도 있긴 함)

 

마운트

- constructor, getDerivedStateFromProps, render, componentDidMount

- componentDidMount:
컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드
주로 DOM을 사용해야하는 외부 라이브러리 연동, axios나 fetch등을 통한 ajax 데이터 요청, DOM 속성 읽고 직접 변경하는 작업 진행

 

업데이트

- getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate

- componentDidUpdate:
리렌더링 마치고 화면에 변화가 모두 반영된 후 호출되는 메서드.
3번째 파라미터로 getSnapshotBeforeUpdate 반환값 조회 가능

- getSnapshotBeforeUpdate: 사용되는 일은 많지 않지만, 함수형 컴포넌트+Hooks 사용 시에는 대체 기능이 아직 없음. DOM에 변화 반영 직전에 DOM 속성 확인하고 싶을 때 사용

 

언마운트

- 컴포넌트가 화면에서 사라지는 것

- componentWillUnmount:
컴포넌트가 화면에서 사라지기 직전에 호출
DOM에 직접 등록했던 이벤트를 제거하고, setTimeout 걸었다면 clearTimeout으로 제거
외부 라이브러리 사용한 게 있고, 그 라이브러리에 dispose 기능 있으면 여기서 호출하면 됨

 

에러 잡기

에러 방지법:

if (!user) { return null };

1. user 값 없으면 null 렌더링함 => null checking
2. users 값 설정 안 해주면 users에 undefined가 들어가서 배열 내장함수 map도 못 씀
   => users가 없으면 다른 결과물 반환하는 작업 - null 반환해주면 됨
3. 인자를 받는 함수에 props 전달 안하면 에러 발생하므로, defaultProps 설정
   Users.defaultProps = { onToggle: () => { console.warn(‘onToggle is missing’); } };
   3-2. (비권장) PropTypes 사용 - 필요한 데이터 안 넣으면 개발 단계에서 경고. props 설정 망각 방지
   3-3. (권장) TypeScript 나 Flow를 사용해 관리

- componentDidCatch:
사전에 예외처리를 하지 않은 에러 발생 시 알려주는 화면 보여주기

componentDidCatch(error, info) {
  console.log({ error, info });  
  this.setState({ error: true });
}

앱에서 에러가 발생했을 때 에러가 발생했음을 인지시켜줄 수 있지만,
서비스에서 실제로 호출되는 일은 없어야 하는게 맞음.

- Sentry 연동
componentDidCatch에서 error와 info 값을 네트워크를 통해 다른 곳으로 전달
무료 모델로도 충분히 사용 가능, 장기적으로 작업하는 프로젝트에 적용 권장
Sentry에서 회원가입/로그인, 새 프로젝트 생성
yarn add @sentry/browser 필요