Props / State

Props

컴포넌트의 속성을 의미

변하지 않는 외부로부터 전달받은 값, 변하지 않아서 읽기 전용, 수정 불가

클래스 컴포넌트 뿐만 아니라 함수형 컴포넌트에서도 사용가능

상위 컴포넌트로 전달받은 값

객체 형태로 이루어져있음

컴포넌트 선언

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

속성 및 값을 할당하는 방법도 유사

<Child attribute={value} />
JavaScript
복사

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>
  );
};
JavaScript
복사

props의 이름을 임의로 지정해줄 수 있습니다. 단, props는 예약어이기 때문에 이름을 props로 짓는 것은 지양해야합니다.

props가 객체로 전달되어야하는 경우 {...props}

State

컴포넌트 내부에서 변할 수 있는 값

값이 변경되면 리렌더링

import React, { useState } from "react";
import "./styles.css";

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;
JavaScript
복사

컴포넌트에서 변화가 필요한 데이터를 state로 정해서 사용합니다. state가 변경되면 컴포넌트가 갱신되면서 사용자가 해당 내용을 확인할 수 있습니다. React 16.8 버전에 Hook이 추가되면서 클래스 컴포넌트를 작성하지 않아도 state를 사용할 수 있게 되었습니다. state는 하위 컴포넌트에서도 존재할 수 있습니다.

State Hook

useState

기본적으로 setState 메소드는 해당 컴포넌트의 재렌더링(re-render)을 발생시킨다.

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

먼저 useState를 컴포넌트 안에서 호출해준다.

일반 변수는 함수가 끝날 때 사라지지만 state 변수는 React에 의해 함수가 끝나도 사라지지 않음

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

useState 를 호출하면 배열을 반환하는데, 배열의 첫 번째 요소는 현재 state 변수이고, 두 번째 요소는 이 변수를 갱신할 수 있는 함수

useStaet의 인자로 넘겨주는 값은 state의 초기값

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
JavaScript
복사

state 변수에 저장된 값을 사용하려면 JSX 안에 직접 불러서 사용