Props

Props ?

• 컴포넌트의 속성(property)을 의미한다.
• 외부로부터 전달받은 값 & 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
• 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값
• 객체 형태 (어떤 타입의 값도 넣어 전달할수 있도록)
• class 문법, 함수 문법으로 만들 수 있다.
• 읽기 전용(read-only)으로 함부로 변경 ❌

JSX 속성 및 값을 할당하는 방법

<Child attribute={value} /> //-> 전달하고자 하는 값을 {}를 이용해 감싸준다

전달방법 1

// 함수의 전달인자처럼 전달받아 React엘리먼트를 반환함

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

전달방법 2

// 또 다른 전달 방법
function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child> // -> 태그 사이에 전달할 값(value)를 넣는다.
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p> // -> 속성이 따로 정해지지 않았으며 이 경우는 .children 으로 사용
    </div>
  );
};

State

State ?

• 컴포넌트 내부에서 변할 수 있는 값 (check box, toggle switch, couter 등..)

사용법

useState

import { useState } from "react";

• useState를 호출한다 === "stats"라는 변수를 선언한다

// 구조분해할당st
function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
// const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
}
// isChecked : state를 저장하는 변수
// setIsChecked : state isChecked 를 변경하는 함수
// useState : state hook
// false : state 초깃값

// 풀어서 썼을 때
function CheckboxExample() {
  const stateHookArray = useState(false);
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

• 상위의 예시에 있는 state 변수에 저장된 값을 사용하려면, 엘리먼트 안에 직접 불러서 쓰며,
  isChecked가 boolean 값을 가지기 떄문에 삼항연산자를 사용한다.

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

state 갱신

• state 변수를 갱신할 수 있는 함수를 호출한다.

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

지켜야 할 내용

• React state는 상태 변경 함수 호출로 변경해야 한다.
• 강제로 변경을 시도 ❌
• 상태 변경 함수 사용은 React와 개발자의 약속
• 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.
  예시 : state.push(1);, state[1] = 2;, state = 'wrong state';