[React] Props & State & 컴포넌트 life-cycle

🌿Component

props 라는 입력, 인자를 받아서 React Element를 반환하는 함수
화면에 출력되는 요소를 반환하는 함수이다.

함수 컴포넌트와 클래스 컴포넌트로 나눌 수 있다.

🌿Props

부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것.
컴포넌트(함수)가 갖는 단일 객체 인자, 전달되는 값.

{ name: Sara } 라는 객체를 props로 하여 <Welcome /> 컴포넌트를 호출한다.

Props 지정

컴포넌트를 부를 때 Props를 함께 지정한다.

<Welcome name="Yeseo", age={26} />

문자열은 큰 따옴표(")로 감싸고, 나머지 형태는 중괄호({})로 감싼다.

컴포넌트의 재사용

Props를 사용하여 같은 타입의 컴포넌트에 다른 Props 값을 주면 효율적인 컴포넌트 재사용이 가능하다.

<Welcome name="Yeseo1", age={24} />
<Welcome name="Yeseo2", age={25} />
<Welcome name="Yeseo3", age={26} />

읽기 전용

Props는 읽기 전용으로서, 자체 Props를 수정해서는 안된다.
모든 컴포넌트들은 자신의 Props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

props를 변경하기 위해서는 state를 사용하면 된다.

🌿State

컴포넌트 내부의 동적 객체 데이터. (optional)
Props가 함수의 인자라면 state는 함수 내부에서 사용되는 변수.
Props 자체는 수정할 수 없으니 state를 통해 수정하도록 한다.

컴포넌트에 따라 state 사용법이 다른데,

• 클래스 컴포넌트
  컴포넌트 자체가 state를 지니는 방식. this.state 사용한다.
  setState 함수를 통해 변경하기.

• 함수 컴포넌트
  Hook(useState)을 사용한다.

Class - constructor

Props를 가져와서 초기 state를 지정해주기.

class ClassExample extends React.Component {
  constructor(props) {
    // class에게 props를 전달해주는 것
    super(props);
    this.state = {
      // state 초기값 설정
    };
  }

setState

컴포넌트 state 객체에 대한 업데이트를 실행한다.
말그대로 state를 세팅한다 라는 뜻으로 클래스 컴포넌트에서 this.setState() 나 함수 컴포넌트에서 useState의 두번째 값(state 갱신하는 함수) 라고 생각하자.

이런 setState 호출은 비동기적임을 명심하자.
호출 직후 값이 반영되지 않으니 인자로 객체가 아닌 함수로 전달한다.

• 클래스 컴포넌트
  • 비동기 예시

     incrementCount() {
       // 객체
       this.setState({count: this.state.count + 1});
     }

  • 동기 예시

    incrementCount() {
      // 함수
      this.setState((state) => {
        return {count: state.count + 1}
      });
    }

🌿Class - 생명주기 메서드

모든 컴포넌트는 여러 종류의 생명주기 메서드를 가지며, 이 메서드를 사용해서 특정 시점에 코드가 실행되도록 설정할 수 있다.
클래스 컴포넌트에서만 사용이 가능하다.

생명주기?

컴포넌트가 페이지에 렌더링 되기 위해 준비하는 과정에서부터 제거될 때까지의 기간이다.
컴포넌트의 생명주기는
페이지에 렌더링 되기 위한 준비 ~ 페이지에서 사라질 때 이다.

마운트

컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때.

1. constructor( )

   • 호출시기 : 컴포넌트가 마운트 되기 전에 호출 되는 메서드.
   • 목적 : state 초기화 / 이벤트 처리 메서드를 바인딩 할 때 사용한다.
   • state 초기값만 할당하고 setState()를 쓰는 등 state를 변경하면 안된다.

2. render( )
   this.props / this.state 의 값을 활용하여 엘리먼트, 배열 등을 반환해야한다.
   render() 는 순수하게 동작해야한다. -> state 변경 X, 항상 동일한 결과 반환, 브라우저와 직접적 상호작용 X

3. componentDidMount( )

   • 호출시기 : 컴포넌트가 마운트된 직후. 컴포넌트 출력물이 DOM에 렌더링된 직후에 실행된다.

업데이트

props 또는 state가 변경되면 갱신이 발생하고, 컴포넌트가 재렌더링 된다.

1. render( )

2. componentDidUpdate()

   • 호출시기 : 갱신이 일어난 직후. 최초 렌더링에서는 호출 X

마운트 해제

컴포넌트가 DOM 상에서 제거, 사라질 때.

1. componentWillUnmount( )
   • 호출시기 : 컴포넌트가 마운트 해제되어 제거되기 직전.
   • 목적 : 타이머 제거, 네트워크 요청 취소, componentDidMount()내에서 생성된 구독 해제 등 정리 작업
   • 여기서 setState()를 호출하면 안된다.