개요

React 에서 데이터를 다루는 두 가지 방법인 State 와 Props 에 대해 학습합니다.

---

학습 목표

• state, props의 개념에 대해서 이해하고 실제 프로젝트에 바르게 적용할 수 있다.
• React 함수 컴포넌트에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
• React 컴포넌트에 props를 전달 할 수 있다.
• 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
• 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
• 이벤트 핸들러 함수를 만들고 React 에서 이용할 수 있다.

---

React Props

Props 정의

컴포넌트의 속성(Property)

Props 특징

• 출생지, 친부모처럼 변하지 않는 외부로부터 전달받은 값(속성) 입니다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다.
  • 컴포넌트에 함수의 전달인자처럼 전달받아 이를 기반으로 화면을 페인팅하는 React 엘리먼트를 반환합니다.
  • 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다.
• 어떤 타입의 값도 넣어 전달할 수 있도록 객체 형태 입니다.
• 함부로 변경될 수 없는 읽기 전용(read-only) 객체 입니다.

Props 사용법

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

Props 사용 예시

• 일반적인 방법
  • 부모 컴포넌트에서 자식 컴포넌트로 넘겨준 Props(속성)은 반드시 props { 속성명 : 속성값, 속성명 : 속성값, ... } 의 객체 형태로 전달됩니다.

// 일반적인 props 사용 예시

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

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

• props.children
  • 여는 태그와 닫는 태그 사이에 value 를 넣고 (부모)
  • props.children 을 활용하여 해당 value 에 접근 (자식)
  • 해당 value 는 자식 컴포넌트에 props { children : value } 객체로 전달됩니다.

// props.children 사용 예시

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

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

---

React State

React State 정의

컴포넌트 내에서 변할 수 있는 값 ("상태")

React State 실사용 예시

대표적으로 다크모드 토글, 쇼핑몰 장바구니 체크박스 등에 사용됩니다.

• 다크모드 on/off 상태에 따라 애플리케이션에서 다크모드가 적용/해제된 페이지를 페인팅(렌더링) 합니다.
• 쇼핑몰 장바구니 체크 여부에 따라 구매할 물건의 개수나 금액이 변경됩니다.
• 위와 같이 State 를 이용하여 사용자의 화면에 변화를 줍니다.

useState() 정의

State Hook 즉 State 를 다루는 방법 중 하나로 useState() 라는 특별한 함수

useState() 사용법

1. React 에서 useState() 를 불러옵니다.
   • import { useState } from "react";

2. useState() 를 컴포넌트 안에서 호출해 줍니다.

   • useState() 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같습니다.

   • 일반적인 변수는 함수가 끝날 때 사라지지만, State 변수는 React 에 의해 함수가 끝나도 사라지지 않습니다.

   • useState() 호출 문법

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

   • 예시

     // useState 문법 예시 (기본: 구조 분해 할당 O)
     
     function CheckboxExample() {
       const [isChecked, setIsChecked] = useState(false);
     }
     
     // useState 문법 예시 (구조 분해 할당 X)
     
     function CheckboxExample() {
       const stateHookArray = useState(false);
       const isChecked = stateHookArray[0];
       const setIsChecked = stateHookArray[1];
     }

3. State 갱신하기
   • state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출합니다.
   • 위의 예시 코드를 기준으로 <input type="checkbox" ...(생략)> 의 엘리먼트 값이 변경되면 onChange 이벤트가 발생하고 이벤트 핸들러 함수를 작동시키는 패턴을 사용합니다.
     1. onChange 이벤트가 이벤트 함수인 handleChecked 를 호출하고 이 함수가 setIsChecked 함수를 호출합니다.
     2. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신됩니다.
     3. 새로운 isChecked 변수를 React 가 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 합니다.

// 완성된 체크박스 컴포넌트 예시

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  
  const handleChecked = (event) => {
    setIsCecked(event.target.checked);
  }
  
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

useState() 주의점 (State Hooks)

• React 컴포넌트는 state 가 변경되면 새롭게 호출되고 리렌더링 됩니다.
• React State 는 상태 변경 함수 호출로 변경해야 합니다.
  • 강제 변경을 시도하면 안 됩니다.
    • state.push(1);, state[1] = 2;, state = 'wrong state'; ❌
    • 리렌더링, state 변경에 오류가 발생합니다.
  • 상태 변경 함수 사용은 React 와 개발자의 약속입니다.

Controlled Component

• React 는 상태에 해당하는 데이터 state 를 따로 관리하고 싶어합니다.
• React 가 state 를 통제할 수 있는 컴포넌트를 Controlled Component 라고 합니다.

---

참조

코드스테이츠 프론트엔드 부트캠프