[React] Props & state

Props & state는 React 라이브러리에서 데이터를 다루는 방법이다.

Props

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 이는 데이터의 흐름이 하향식으로, 그리고 한 방향으로(one-way data flow) 흐르기 때문이다. 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없는 read-only 데이터이다.

How to use props

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
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>
  );
}

export default Parent;

props를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value를 넣어 전달하는 방법이다. 이 경우 props.children 을 이용하면 해당 value에 접근하여 사용할 수 있다.

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

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};
export default Parent;

State

State는 현재 컴포넌트에서 생성, 변할 수 있는 데이터이다. state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능하다. 즉, State는 한 컴포넌트의 상태를 나타낸다.
React의 함수 컴포넌트에서는 State를 사용하기 위해 useState라는 훅(Hook)을 사용하는데, useState는 State 변수의 초기값을 매개변수로 전달 하여 호출하며, 결과값으로는 배열을 반환한다. 반환된 배열에서는 useState 함수를 호출할 때 설정한 초기값이 할당된 변수와 해당 변수를 수정하기 위한 Set 함수가 포함되어 있다.

const [변수명, set 함수명] = useState (데이터 초기값);

• 배열 첫 번째 요소: 데이터 초기값이 들어간 변수
• 배열 두 번쨰 요소: 데이터를 수정할 수 있는 Set 함수

import React, { useState } from "react";

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

export default CheckboxExample;