[React] Props & State

1. Props

컴포넌트의 속성을 의미한다.

props는 변하지 않는 데이터로 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 뜻한다.

React 컴포넌트는 함수 또는 클래스 컴포넌트로 나뉘어지는데, 둘다 props를 전달인자처럼 사용한다.

객체 형태로 전달되며, 외부로부터 전달받아 변하지 않는 값이다. 따라서 props는 함부로 변경될 수 없는 읽기 전용 객체다.

만약 props를 다른 컴포넌트에서 변경을 하려면 얕은 복사 후 변경하는 편이 좋을 것 같다.

Props의 사용법은 다음과 같다.

1. 부모-자식 관계의 컴포넌트 2개를 생성한다.

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

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

Child 컴포넌트는 Parent 컴포넌트 내부에서 호출된다.

2. 호출된 Child 컴포넌트에 속성을 할당해준다

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

3. Child 컴포넌트에 props를 받아온다.

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

4. 전달받은 props를 사용한다.

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

부모 컴포넌트에서 text라는 key값으로 주었으니 props.key를 사용하면 value값인
I'm Child 가 나타난다.

Child에 props를 넣는 다른 방법

<Child>I'm Child</Child>

2.State

Application의 현재 상태란 뜻의 state는 컴포넌트 내부에서 변할 수 있는 값으로, radiobutton을 예로 들었을때 check된 상태와 check되지 않은 상태 2개로 구분이 가능하다.

state를 다루는 대표적인 hook은 useState가 있다.

useState 사용법

1. useState import

useState를 사용하기 위해서는 React로부터 useState를 불러와야 한다.

import {useState} from "react;

2. 컴포넌트 내 useState 사용

useState의 구조는 다음과 같다.

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

따라서 컴포넌트 상단에 useState를 선언해준다.

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