[State & Props]State & Props

Props

• 외부로부터 받은 값
• 컴포넌트의 속성을 의미
• 부모 컴포넌트로로 부터 전달받은 값
• 객체형태
• 읽기전용

1. 하위에 전달하려는 값과 속성 정의
2. props를 이용해 값과 속성 전달
3. props 렌더링

형태

function P() {
  return (
    <div className="parent">
      <h1>나는 부모다</h1>
      <C text={"룰루룰루"} />
      <C text={"fuck"} />
    </div>
  );
}

function C(props) {
  console.log("props : ", props); //props :  {text: "룰루룰루"} props는 객체라는 것을 알 수 있다.
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default P;

props.children - 해당 value에 접근 가능

function P() {
  const ff = "룰루";
  const dd = "랄라";
  return (
    <div className="parent">
      <C>{ff}</C>
      <C>{dd}</C>
    </div>
  );
}

function C(props) {
  return (
    <div className="child">
      <p>{props.children}</p>
    </div>
  );
}

State

변할 수 있는 값

toggle 컴포넌트가 가지는 state - on/off 여부

Counter 컴포넌트가 가지는 state - 현재 숫자 값

• 부모로부터 props를 통해 전달되지 않는다.
• 시간이 지나면 변할 가능성이 있다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산이 불가능하다.

state는 React state로 다뤄야한다.

useState

state를 다루는 방법 중 하나

불러오기

import { useState } from "react";

호출

• useState 호출은 state라는 변수를 선언하는 것 과 같고 이름은 상관없다.
• 함수가 끝나도 사라지지 않는다.

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

import React, { useState } from "react";

function Checkbox() {
  const [Check, setCheck] = useState(false);

  const handleCheckbox = (event) => {
    setCheck(event.target.checked);
  };
  return (
    <div className="App">
      <input type="checkbox" checked={Check} onChange={handleCheckbox} />
      <span>{Check ? "Checked" : "Unchecked"}</span>
    </div>
  );
}

export default Checkbox;

주의

위 state hook 사용법은 state가 변경되면 리렌더링이 된다.

React state는 상태 변경 함수 호출로 변경해야한다. ex: ckeck = true, check.push(0)