[리액트 삼대장]: Component, State, Props

1. 컴포넌트

기능을 단위별로 캡슐화하는 리액트의 기본 단위
사용자가 보는 뷰는 컴포넌트들을 조합하여 만든다.
함수 혹은 클래스로 만든다.
상위 컴포넌트에서 props를 입력받고, 내부적으로 각자의 state를 관리한다.
컴포넌트의 이름은 대문자로 시작한다.

컴포넌트: <App />, <Milk />

컴포넌트: ,

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Milk from "./Milk";

ReactDOM.render(
  <React.StrictMode>
    <App />
    <Milk />
  </React.StrictMode>,
  document.getElementById("root")
);

컴포넌트는 반드시 하나의 태그만 리턴할 수 있기 때문에, 최상위 태그 안에 태그/컴포넌트들을 배치한다.

2. State

변수 대신 사용하는 데이터 저장공간
컴포넌트의 동적 데이터를 넣을 공간
state는 문자, 숫자, array, object 등 데이터 타입을 자유롭게 설정할 수 있고, 데이터 수정도 가능하다.
자주 바뀌고 중요한 데이터는 state로 만드는 것이 좋다.

-외부에서 알 필요 없는 정보를 은닉하는 용도로 사용한다.

- F5없이도 html이 자동으로 재렌더링하는 주체다.

1) setState()

state는 직접 수정하지 않는다. setState()를 이용하여 수정한다.

- setState를 사용하지 않으면, 새 state와 함께 render function이 호출되지 않는다.

setState는 Virtual DOM을 통해 state가 바뀐 필요한 부분만 업데이트한다.
setState를 호출할 때 마다, 새로운 state와 함께 render 함수를 호출한다.
props로 state를 전달했으면, 하위 컴포넌트도 동일하게 render함수가 호출된다.

2) 현재 값을 기반으로 State를 변경하고자 하는 경우에는 콜백함수를 활용한다.

setState에 바로 값을 넣지 않고, 콜백함수를 넣어주는 이유는 setState가 비동기로 처리되기 때문에 여러 번 호출하면 처리 순서가 바뀔 수 있기 때문이다.

const [count, setCount] = useState(0);

setCount((current) => {
  return current + 1
})

3. Props

1) prop는 읽기 전용이기 때문에 변경할 수 없다.

this.props.title = "제목이 바뀌었습니다." // ❌

2) 함수형 컴포넌트에서 props 받아오기

함수형 컴포넌트의 첫번째 인자는 props를 받는다.
{} curly bracket을 사용해 props안에 있는 변수들을 바로 받아온다.

function IntroduceComponent({ name, picture, rating }) {
  return (
    <div>
      <h2>I am {name}.</h2>
      <img src={picture} alt="사진" height="200px" width="200px"></img>
      <h4>{rating}/5</h4>
    </div>
  );
}

3) 상하위 컴포넌트간 통신 예시

<div className='App'>
      <SubComponent
        data={this.state.data}
        onChange={(e) => {
          this.setState({ data: e.target.value });
        }}
      />
</div>

상위 컴포넌트가 하위 컴포넌트에게 명령할 때는 props를 이용해 데이터를 전달
하위 컴포넌트가 상위 컴포넌트에게 명령할 때는 props의 값을 바꿀 수 없기 때문에 (setState함수를 담은) 이벤트를 사용한다.