Props

부모 컴포넌트로부터 전달받은 값으로 어떤 타입의 값도 넣어 전달할 수 있도록 객체의 형태를 가진다.

1. Props 사용방법

Props를 사용하는 순서는 다음과 같이 3단계로 나눈다.

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

2. Props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 Props를 렌더링한다.

function Parent(){
  return(
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
    </div>
  )
}

function Child(props){
  return(
    <div className="child">
      <p>{props.text}</p>
    </div>
  )
}

State

컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값

1. useState

React에서는 state를 다루는 방법으로 useState라는 특별한 함수를 사용한다.

useState import

useState를 사용하기 위해서는 import를 통해 useState를 불러와야한다.

import {useState} from "react";

State 선언

import가 끝나면 사용하기 위하여 state를 선언해주면 된다.

let [state, setState] = useState(초기값);

state : 현재 state변수 (변수명은 해당 state에 맞게 자유롭게 지어주면 된다)
setState : state변수를 갱신할 수 있는 함수 (변수명은 보통 해당 state앞에 set을 붙여서 사용한다)
초기값 : state의 초기값을 설정

state값을 직접적으로 변경할 수는 없고 반드시 setState를 통해서 변경해야한다.