React State & Props

How to use props

props를 사용하는 3단계 순서

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

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

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

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

function Child() {
  return (
    <div className="child"></div>
  );
};

<Parent>,<Child> 컴포넌트 선언.

<a href="www.codestates.com">Click me to visit Code States</a>

HTML 속성과 값 다루는 법

<Child attribute={value} />

React에서 JSX 속성 및 값을 할당하는 방법 1

<Child text={"I'm the eldest child"} />

React에서 JSX 속성 및 값을 할당하는 방법 2

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

<Child> 컴포넌트에서 props 매개변수 사용 예시

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

컴포넌트에서 props.text 렌더링 예시

useState 사용법

 

import { useState } from "react";

usestate 불러오기.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
}

usestate 문법 예시

function CheckboxExample() {
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번

  //...

  // 2번 코드와 같습니다.
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

usestate 구조 분해 할당 예시

state 갱신하기

 

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>
  );
}

완성된 체크박스 컴포넌트