state는 컴포넌트 사용중 컴포넌트 내부에서 변할 수 있는 값을 말한다.

props는 외부로 부터 전달받은 값, state는 내부에서 변화하는 값을 말한다.

props

function Paranet() {

<Child attribute={value}><Child>

}

function Child(props){

<h1>{props.attribute}</h1>

}

1. 위와 같은 예시에서 Parent컴포넌트에서 <Child>로 하위 컴포넌트에 전달 (위처럼 attribute={value} 형식으로 속성과 값을 할당한다)
2. props를 통해 전달되며, Child는 props를 통해 필요한 모든 데이터를 가져온다.
3. 중괄호 내에 props를 통해 그에 해당하는 속성값(attribute) 위치에 parent에서 전달한 값({value})를 렌더링 한다. (props 객체의 key : value는 상위 컴포넌트에서 정의한 {attribute : value} 형태를 띠게 된다. 그래서 props.attribute 이와 같은 양식을 통해서 렌터링한다.

state

useState는 아래와 같은 형식이라고 할 수 있다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기값);

useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState인자는 state 초기값이라고 할 수 있다.

import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
  console.log("rerendered?");
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

export default CheckboxExample;

위의 예시에서 useState의 매커니즘에 대해 설명하자면,