[React]React State & Props

1. State & Props

State
👉 살면서 변할 수 있는 값
👉 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값
Props
👉 변하지 않는 외부로부터 전달받은 값

📋 props 특징

• 컴포넌트의 속성(property)을 의미.
• 부모 컴포넌트로부터 전달받은 값.
• 객체 형태 이다. 다양한 타입의 값을 넣어 전달할 수 있도록 객체 형태를 가진다.
• 읽기 전용 이다. 함부로 변경될 수 없는 읽기 전용 객체이다.

📋 props 사용법

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

(1) props.속성명

function Parent() {
  return (
    <div className="parent">
      <Child text={"I'm the eldest child"} />
      <Child text={"I'm the second child"} />
    </div>
  );
}
function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

1. Parent와 Child 컴포넌트 선언한다.
2. Parent 컴포넌트에서 text라는 속성을 선언하여 이 속성에 문자열 값을 할당하고, Child 컴포넌트에 전달한다.
   * React에서 속성 및 값을 할당할 때는, 전달하고자 하는 값을 중괄호 {}를 이용하여 감싸주면 된다.
3. Parent 컴포넌트에서 전달한 문자열을 Child 컴포넌트가 받는다.
4. Child 컴포넌트는 props를 전달받아 value(값)을 dot notation으로 접근하여 props를 렌더링한다.

(2) props.children

function Parent() {
  return (
    <div className="parent">
      <Child>TEST</Child>
    </div>
  );
}
function Child(props) {
  return (
    <div className="child">
      <p>{props.children}</p>
    </div>
  );
}

• props를 전달하는 또 다른 방법으로는 props.children을 이용하여 value에 접근하는 것.

📋 state 사용법

(1) useState 불러오기

import { useState } from "react";

• React에서 state를 다루기 위해서 React Hooks에서 제공되는 useState() 함수를 사용한다.

(2) useState 호출하기

function CheckboxExample() {
  //const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값)
  const [isChecked, setIsChecked] = useState(false);
}

• useState 를 호출하면 배열을 반환한다.

• 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.

• useState 의 인자로 넘겨주는 값은 state의 초기값이다.

• 삼항연산자를 통해 true, false 여부에 따라 state 변수에 저장된 값 사용할 수 있다.

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

(3) state 갱신하기

import { useState } from "react"; //useState 불러오기

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false); //state 선언
  
  //이벤트 핸들러
  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };
  
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

• state 변수를 갱신할 수 있는 함수(setIsChecked) 호출.

❌ state 사용시 주의점 ❌

👉 React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.

• 아래 예시에서는 컴포넌트의 상태가 바뀔 때마다 새롭게 호출되고 리렌더링 되는 것을 확인할 수 있다.

import React, { useState } from "react";

function CheckBox() {
  console.log("rerendered?");
  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 CheckBox;

👉 React state는 상태 변경 함수 호출로 변경해야 하며 강제로 변경을 시도하면 리렌더링이 되지 않거나, state가 제대로 변경되지 않는다.

• ex) 강제로 변경하는 경우
  state.push(1)
state[1] = 2
state = 'wrong state'