2023-01-26 TIL (state, props)

Props

function Parent() {
return (

<div className="parent">
  <h1>I'm the parent</h1>
  <Child text={"I'm the eldest child"} />
  <Child />
</div>

);
}
function Child(props) {
console.log("props : ", props);
return (

<div className="child">
  <p>{props.text}</p>
</div>

);
}
export default Parent;

State

React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공합니다
useState 를 이용하기 위해서는 React로부터 useState 를 불러와야 합니다. import 키워드로 useState 를 불러옵시다.

[코드] useState 문법 예시
function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
const [isChecked, setIsChecked] = useState(false);
}

useState 를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수입니다.
useState 의 인자로 넘겨주는 값은 state의 초깃값입니다

isChecked : state를 저장하는 변수
setIsChecked : state isChecked 를 변경하는 함수
useState : state hook
false : state 초깃값

state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출합니다.

function CheckboxExample() {
  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>
  );
}