[React] 컴포넌트(Component)와 생명주기(LifeCycle)

1. 컴포넌트(Component)

• 리액트에서 컴포넌트는 Props와 State를 가지는 Object이다.
• 컴포넌트는 props를 외부에서 입력으로 받고 컴포넌트에서 엘리먼트를 조합하여 렌더링을 위한 DOM을 출력으로 반환하는 객체
• 즉, 부모로부터 전달된 props를 받아 DOM을 출력으로 반환한다.
• 리액트 엘리먼트
  - React 엘리먼트는 <div>, <span>과 같은 하나의 DOM에 해당하는 요소를 의미
  
  
• 따라서 리액트에서 엘리멘트들이 모인 구조가 하나의 컴포넌트를 의미한다.
• 엘리먼트들을 모아 모듈화한 재사용 가능한 크기의 집합을 컴포넌트라고 할 수 있다.

2. 컴포넌트 종류

• 클래스형 컴포넌트
  - 리액트 초기의 컴포넌트 방식(구식)
  

  

  - 클래스형은 React.Component를 상속받기 때문에 import React from 'react'를 해줘야 한다.
  - return 안에 있는 것을 DOM을 출력으로 반환한다.
• 함수형 컴포넌트
  - 리액트가 업데이트 되며 만들어진 간결한 방식(신식)
  

  

  - 함수형은 render를 따로 안쓰고 바로 return을 통해 DOM을 출력으로 반환한다.

3. 컴포넌트 prop 입력과 출력

index.js - 부모

- 컴포넌트를 부르는 곳에서 속성으로 prop를 입력할 수 있다.

Day02A4.jsx(클래스형) - 자식

Day02A4.jsx(함수형) - 자식

-  상위 컴포넌트(부모)에서 하위 컴포넌트(자식)에게 prop을 입력을 했기 때문에 DOM을 출력으로 반환하는 곳에서 입력 받은 것을 사용할 수 있다.

- this.props.속성명 을 사용하면 입력받은 것을 사용할 수 있으며 {}을 이용해서 DOM으로 출력할 수 있다.

- 컴포넌트에서 반환하는 DOM을 index.js에서 받아 실제 HTML로 렌더링 함으로 화면에 출력된다.

4. 컴포넌트 생명주기(LifeCycle)

출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

- 컴포넌트 생성/업데이트/제거 될 때의 컴포넌트 동작 과정을 의미

- 생성(mount) : 컴포넌트의 인스턴스가(객체)가 생성되어 DOM에 삽입되는 과정
- 업데이트(updat) : props 또는 state가 변경되어 렌더(화면그리기)가 진행되는 과정

- 제거(unmount) : 컴포넌트가 DOM에서 제거되는 과정

5. 생성 / 업데이트 / 제거 주기 메소드

생성 주기
constructor()	컴포넌트가 생성될 때 단 한번만 호출되며, this.props, this.state에 접근 가능 이 메소드를 사용할 때 메소드 맨 위에 super(props)를 무조건 써줘야 한다.
getDerivedStateFromProps()	props에 있는 값을 state에 동기화 시킬 때 사용하는 메소드(선택사항)
render()	웹 화면(UI)를 렌더링(화면그리기)하기 위해 DOM을 반환하는 메소드
componentDidMount()	컴포넌트가 웹 브라우저상에 렌더링(그려진) 후 호출되는 메소드

업데이트 주기
getDerivedStateFromProps()	생성 주기에서 호출되 듯 업데이트가 시작되기 전 호출됨
shouldComponentUpdate()	props/state를 변경했을 때 리렌더링을 시작할 지 여부를 지정할 수 있다. true 이후의 업데이트 주기 진행, false 이후의 업데이트 주기 종료
render()	생성 주기와 동일하게 호출된다.
getSnapshotBeforeUpdate()	컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메소드
componentDidUpdate()	컴포넌트 업데이트 작업이 끝난 후 호출되는 메소드

제거 주기
componentWillUnmount()	컴포넌트가 DOM에서 제거되기 전에 호출되는 메소드