state & props

State는 뭐고 props는 뭘까?

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

Props는 Properties의 약칭으로 외부로부터 전달받은 값이라고 할 수 있다.

Props 특징

Props는 객체 형태이다.
props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.

props는 읽기 전용이다.
props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다.

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"} /> // 2. 자식 컴포넌트에 내릴 값을 정의한다
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
      <Child />		// 1. 부모 컴모넌트에서 자식 컴포넌트를 생성한다
    </div>
  );
}

function Child(props) {	// 3.받아올 인자값을 정의한다
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.text}</p> // 4.속성 값을 전달 받는다
    </div> // ** props 는 객체라고 하였고, 이 객체의 { key : value } 는 <Parent> 컴포넌트에서 정의한 { attribute : value } 의 형태를 띠게 된다. 
  );

State 특징

State는 바뀌는 값이기에 사용자가 입력한 값에 따라 데이터를 바꿔줘야 한다.

이 기능은 useState 를 이용하여 구현할 수 있고 상단에 React로부터 useState를 import 해야 한다.

import { useState } from "react";

useState 를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수입니다. useState 의 인자로 넘겨주는 값은 state의 초기값입니다.

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

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

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox"   // 체크박스를 생성하는데
      checked={isChecked} 	   // 상태는 초기값이 false인 isChecked이다 
      onChange={handleChecked} // 사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출
      /> 
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

//사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하게 됩니다. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링합니다.

HTML과 React의 이벤트 처리 차이

<button onclick="handleEvent()">Event</button> --- in HTML

<button onClick={handleEvent}>Event</button> --- in React