[React] State & Props

2022.11.29

💡 React State & Props

📌 State [ Mutable Data ]

변할 수 있는 값

컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값

ex) 나이, 현재 사는 곳, 취업여부, 결혼/연애 여부

📌 Props [ Immutable Data ]

외부로부터 전달받은 값

함부로 변경될 수 없는 읽기 전용 객체

**부모 컴포넌트로부터 전달받은 값 **

React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.

ex) 이름, 성별

🧐 How to use props

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의
2. props를 이용하여 정의된 값과 속성을 전달
3. 전달받은 props를 렌더링

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn>{itemOne} {itemTwo}</Learn>
    </div>
  );
};

const Learn = (props) => {
  return <div className="Learn">
    <p>{props.children}</p>
  </div>;

};

// React를 배우고 있습니다.

🧐 How to use state

// 기본구조 
import { useState } from "react";
function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false); 
  ....
  // const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
  
  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}