[TIL] 2023-02-03

• 리액트의 핵심 (컴포넌트, JSX, 가상DOM) 중 컴포넌트를 공부하면서 빠트릴 수 없는 클래스 컴포넌트 VS 함수 컴포넌트, 클래스 컴포넌트 방식에 대해서 먼저 알아보면서 리액트 컴포넌트가 동작하는 흐름과 한계점과 함수 컴포넌트를 사용하는 이유를 느끼는 게 목표임

  기본서를 보다가 기억하기 쉽고 이해하기 편한 문구가 눈에 들어와서 인용함.

<기본적인 수준의 컴포넌트>
하나의 컴포넌트는 기본적으로 하나의 머신, 이 머신은 상태 데이터를 포함하고 해당 데이터가 바뀜에 따라 컴포넌트에서는 JSX 언어를 통해 HTML을 만들어낸다.

• 클래스 컴포넌트

  • 상속 방식의 코드 재사용
  • 라이프 사이클
  • 고유의 상태를 가지는 것이 일반적
  • 자식 컴포넌트를 가질 수 있다. (부모 컴포넌트가 렌더링되는 시점에 렌더링)
  • React.Component 객체를 상속받아야함
    • 리액트 컴포넌트의 모든 기능을 갖게됨
    • 개발자가 자신의 고유코드와 로직을 원하는 시점에 컴포넌트 내부에 삽입할 수 있도록 해줌

• 상태

• 라이프 사이클 메서드

  • 생성

    Constructor, getDerivedStateFromProps(props, state), render, componentDidMount 등
    

  • 업데이트

    shouldComponentUpdate(nextProps, nextState), getSnamshotBeforeUpdate(prevProps, prevState), componentDidUpdate(prevProps, prevState, snapshot)
    

  • 제거

    componentWillUnmount
    

  
  

• 리액트 훅
  프로젝트를 진행하면서 기간 내에 결과물을 내기위한다는 핑계아닌 핑계로 리액트 공식 문서에서도 권장하고 있는 함수 컴포넌트를 사용했다.