DIL: 모던 리액트 딥 다이브, 1주차-5

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week1-5_2024-03-08

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------ | ----------- | | 1주차 | 1, 2장 | 리액트 핵심요소와 자바스크립트 | 144p~159p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시~12시, 클래스 컴포넌트 예제 만들어봄🤔

클래스 컴포넌트

class MyComponent extends React.Component: <MyProps, MyState> {
  constructor(props: MyProps) {
    super(props)
    this.state = {
      count: 0
    }
  }
  ...
}

public render() {
  const {
    props: { required, text },
    state: { count, isLimited },
  } = this;

  return (
    <div>{count}</div>
  )
}

• class 컴포넌트의 constructor는
  • state을 초기화 한다
  • props를 super에 전달한다
• constructor 없이 state을 초기화?
  • ES2022의 class field
  • @babel/plugin-proposal-class-properties로 트랜스파일 해야함

생명주기 메서드

• React 17 이전의 unsafe 메서드?

  • UNSAFE_componentWillMount()
  • UNSAFE_componentWillReceiveProps()
  • UNSAFE_componentWillUpdate()

• Life Cycle Method 실행되는 시점

  1. mount
  2. update
  3. unmount

• render()

  • mount, update
  • 순수 함수 no side-effects

• componentDidMount()

  • 마운트 후 > this.setState 호출 시? 즉시 다시 랜더링 >> 브라우저가 실제로 UI를 업데이트 하기 전에 실행
  • 성능 문제가 있을 수 있음 > 꼭 필요한 작업만 ex) API 호출 후 업데이트, DOM 의존

• componentDidUpdate()

  • 조건문으로 탈출하지 않으면? this.setState 계속 호출

• componentWillUnmount()

  • 클린업, this.setState 호출x

• shouldComponentUpdate()

  • state이나 props의 변경으로 인해 발생하는 리랜더링을 막을 수 있다

• getDerivedStateFromError()

  • 에러 바운더리 만듦
  • 랜더링 과정에서 호출되므로, side-effect 있으면 안된다. (error state 반환 외의 모든 것, 로깅도 안됨)

• componentDidCatch

  • 커밋 단게에서 호출되므로, side-effect를 수행할 수 있다
  • 에러 로깅

• 👉 Class Component 메소드 실험