리액트 공식문서를 참고하여 작성 한 글입니다.

---

👉🏻 Component ?

UI을 재사용 할 수 있는 부분을 분리한 것을 말한다

function App() {
 return (
   <div>
      <h1> Hello, Sara!</h1>
      <h1> Hello, Cahal!</h1>
      <h1> Hello, Edite!</h1>
   </div>
 );
}

위와 같은 함수가 있다고 가정해보자
여기서 h1이 반복되고 있다는 것을 알 수 있다.
또한, Hello, (이름)! 텍스트도 안에 있는 이름만 바뀌고 모두 같은 형식을 가지고 있는 것을 알 수 있다!
이런 UI가 반복되는 것, 즉 재사용이 가능한 부분은 컴포넌트로 나누어 관리하는 것이 효율적이다

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

function App() {
 return (
   <div>
     <Welcome name="Sara" />
     <Welcome name="Cahal" />
     <Welcome name="Edite" />
   </div>
 );
}

위 코드를 Welcome 컴포넌트로 분리해 props로 name값을 받아주어 관리하였다. 간단한 코드라 아직은 왜! 컴포넌트로 나누는 것이 효율적인 방법인지 이해가 잘 되지 않겠지만 (나도 그랬다! 😱) 컴포넌트를 분리하며 프로젝트를 하다보면 유지보수 및 가독성이 좋아지는 것을 느낄 수 있을 것이다.

---

👉🏻 props

props 는 properties 의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

위 코드에서 name값을 전달 해주기 위해 props값을 사용하였다.
props 는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name 을 조회하면 된다.

---

👉🏻 state

state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리되는 정보이다.

this.state = {
      id: '',
      pw: '',
      btn: false,
    };

함수의 현재 상태값을 나타낸다.
state를 변경해주고 싶다면 setState을 사용하여 변경 할 수 있다.

✍🏻 setState

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다