React

리액트는 컴포넌트들을 사용하는 라이브러리이다.
데이터가 업데이트되면 Re-render 된다.

React에서 컴포넌트란?

컴포넌트란, 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 한다.
LifeCycle을 통해 컴포넌트에 이벤트를 발생시키는 작업들을 수행할 수도 있다.

class 컴포넌트

• 리액트에 내장되어있는 State, LifeCycle기능 사용이 가능하다.
• render 안에서 JSX을 반환하여 보여준다.

function 컴포넌트

• 함수형 컴포넌트는 State, LifeCycle대신 Hooks를 사용하여 선언한다.

• 일반 함수형과, 화살표 함수형을 사용하여 선언할 수 있다.

  index.js

  ReactDom.render(
    <App />,
    document.getElementById('root)
  );

ReactDom이라는 라이브러리를 사용해서 root라는 아이디를 가진 엘리먼트와 App이라는 최상위 컴포넌트를 연결해주는 작업을 한다.

---

LifeCycle이란?

컴포넌트의 생명주기.
컴포넌트가 실행되거나 업데이트 되거나 제거될때 특정한 이벤트가 발생하는것을 말한다.

LifeCycle 순서

Constructor → Render → ComponentDidMount → ComponentDidUpdata → ComponentWillIUnmount

컴포넌트가 새로 그려질때 위의 순서로 렌더링된다.

---

State, Props

개별 컴포넌트는 props라는 매개변수를 받아오고 render함수를 통해 표시할
뷰 계층 구조(화면에 보이는 UI)를 반환한다.

import React from 'react';

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

State

• 컴포넌트 안에서 우리가 정의한 컴포넌트의 state오브젝트.
• 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render함수를 호출한다.

Props

• 컴포넌트 밖에서 주어지는 데이터. 부모 컴포넌트 > 자식 컴포넌트로 이동한다.
• 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 state와는 다르게, props은 컴포넌트 외부에서 데이터를 제공받는다.
• 상황에 따라 주어진 데이터를 받아서 그 데이터에 맞게 UI를 보여주기 위해서 사용된다.

흐름 파악하기

상위 컴포넌트 → props → 하위 컴포넌트하위 컴포넌트 → 이벤트 실행 → 상위 컴포넌트의 state호출 → state값 수정