TIL_React State & Props

💡 Props

변하지 않는 외부 컴포넌트로 부터 전달받은 속성

Porps는 부모 컴포넌트로부터 전달받은 값으로써 상위 컴포넌트의 값을 인자로 받아 불필요한 구현을 하지않도록 해주는 속성이다.

🔍 Props의 특징

• 객체
  : props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체 형태를 가진다.
• 부모 컴포넌트(상위 컴포넌트)로 부터 전달받은 값
• read-only
  : props는 성별, 이름처럼 외부로부터 전달받아 변하지 않는 값이다.
  함부로 변경되면 안되기 때문에, 읽기 전용 객체인 것이다.
  

📌 현업에서의 Props

위에서 확인했듯이 props는 객체 형태로 받아온다.
그렇기때문에 ES6문법의 구조분해할당으로 객체에서 필요한 값만 받아올 수 있다.

현업에서는 이렇게 구조분해할당을 활용한 방법을 많이 쓰는 편이다.

🔍 Props 사용법

props의 사용절차는 다음과 같다.

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

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

하위 컴포넌트(Child)에 전달할 속성(text)과 값('I'm the eldest child') 정의

function Child(props) {

  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

props를 인자로 받아 상위 컴포넌트(Parent)에서 정의된 값과 속성을 전달받는다.
그리고, 전달받은 props를 html태그로 랜더링해준다.

💡 State

컴포넌트 내에서 변할 수 있는 값, 상태

우리가 흔히 사용하는 웹페이지에서 상태관리는 쉽게 찾을 수 있다.
예를 들어, 쇼핑몰 사이트의 장바구니 페이지에서 살 물건을 체크하는 체크박스에도 상태가 존재한다.

체크가 된 상태 / 체크가 되지 않은 상태

체크가 된 항목의 값과 수량을 합산하여 최종 구매가격과 구매항목을 화면에 보여준다.
이처럼, 상태에 따라 화면이 달라지는 것을 React State의 useState를 통해 구현할 수 있다.

🔍 useState 사용법

📌 import

import React, { useState } from "react";

React로 부터 useState를 import 키워드를 통해 불러와준다.

📌 호출

const Checkbox = () => {
	const [isChecked, setIsChecked] = useState(false);
}

컴포넌트 안에서 useState함수를 호출한다.

이때, isChecked는 상태가 저장될 변수이다.
setIsChecked는 isChecked의 상태를 변경해 줄 상태변경함수이다.

위의 코드처럼 isChecked, setIsChecked에 useState의 리턴값을 구조분해할당하고 있다.
useState의 파라미터는 isChecked의 초기값이 된다.

다시 정리하자면,

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

📌 사용

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

jsx 엘리먼트 안에 삼항연산자를 활용하여 상태변수 (isChecked)를 조건에 맞게 사용하면 된다.

📌 State 갱신 및 Rerendering

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

state를 갱신하려면 상태변경함수인 SetIsChecked를 호출해야 된다.

위의 코드를 보면,
체크박스에 이벤트가 발생하면 handleChecked 함수가 호출되고,
handleChecked 함수에서 event.target.checked(체크박스의 체크여부)가 setIsChecked 함수를 통해 isChecked 변수에 할당(갱신)된다.

isChecked 변수가 갱신되면, React는 갱신된 isChecked를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 랜더링한다.

❗️ 이 때, 반드시 상태변경함수를 통해 상태를 변경해야 리랜더링이 되고, 그냥 직접적으로 상태를 변경한다면 리랜더링이 되지 않는다.