[React] React State & Props

 

Chapter1-1. Props

• 컴포넌트의 속성(property)을 의미한다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환하기 때문에 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.
• 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.
• props는 읽기 전용이다. props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이기 때문에 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다. 함부로 변경되지 않아야 하기 때문이다.

Chapter1-2. State

• state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이다. 실제 애플리케이션에서는 쇼핑몰 장바구니를 예로 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓는다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태이다.

useState 사용법

React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공한다. 이 함수의 사용 방법과 작동 방식을 체크박스 예시로 살펴보자

• 우선 useState 를 이용하기 위해서는 React로부터 useState 를 불러와야 한다.

1 import { useState } from "react";

• 이후 useState 를 컴포넌트 안에서 호출 해준다. useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
• 문법적으로 보면 아래 예시의 isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수이다.

function CheckboxExample() { 
// 1번 코드를 풀어쓰면
const [isChecked, setIsChecked] = useState(false); // 1번 
//... 

// 2번 코드와 같습니다. 
const stateHookArray = useState(false); // 2번 
const isChecked = stateHookArray[0];
const setIsChecked = stateHookArray[1]; }

 

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

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

• 수도 코드 

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

 

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked 를 변경하는 함수
• useState : state hook
• false : state 초깃값

 

• 이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 된다. 여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용한다.

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

 

state 갱신하기

• state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출해야 한다.
• 이번 예시의 경우, input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked 가 변경되어야 하고, 브라우저에서 checked로 값이 변경되었다면, React의 isChecked 도 변경되어야한다.
• input[type=checkbox] 엘리먼트의 값이 변경되면 onChange 이벤트가 발생한다. 
• 사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked 를 호출하고, 이 함수가 setIsChecked 를 호출하게 된다. setIsChecked 가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 하게 된다.

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