TIL 21일차

시작하며

오늘은 React의 Props와 State에 대해서 학습하였다. 이전에 스프린트를 진행하면서 컴포넌트에 변수를 전달하는 방법이나 어느 컴포넌트에서 import를 해줘야 하는지 궁금했었는데 이번 챕터를 통해 알 수 있었다.

React

Props

정의

• 컴포넌트의 속성(property)을 의미하며 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.

• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이며,React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.

• 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.

• 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 읽기 전용 값이기 때문에 props는 함부로 변경될 수 없다.

전달 방법

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

부모 컴포넌트에서 자식 컴포넌트를 불러올때 태그의 속성을 추가해주면 해당 내용이 객체 형태의 props로 자식 컴포넌트로 전달된다. 문자열뿐만 아니라 부모 컴포넌트에서 선언된 함수도 전달이 가능하며 반드시 key={value} 형태로 전달이 되어야 한다.

자식 컴포넌트에서 전달된 값을 불러올때는 function Child(props) 함수형 컴포넌트의 전달인자에 전달되는 값을 적어준 후 props.key(객체이기 때문에 dot notation 사용)의 형태로 사용할 수 있다. 전달되는 props가 많은 경우 function Child({key1, key2}) { 의 형태로 구조분해 할당을 해주면서 불러오면 {key1} 이런식으로도 사용이 가능하다.((props)로 전달받은 후에 구조분해 할당을 해줘도 동일하다.)

---

State

정의
State는 Props와 다르게 재할당이 가능한 변수이다. 예를 들어 쇼핑몰 사이트의 장바구니에 담긴 상품을 체크하거나 해제할 때 혹은 물건의 수량을 추가하거나 새 상품을 추가할 때 총 주문금액이 달라지는 것을 볼 수 있다. 이 웹페이지에서 체크여부, 담은 물건의 수량, 총 주문 금액 등 사용자의 움직임에 따라 변화하는 모든 값은 State를 사용해야 한다.

useState

import { useState } from "react";
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>
  );
}

위 코드는 체크박스에 체크가 되면 "Checked!!", 체크해제시 "Unchecked"라는 문자열이 출력된다.
여기서 isChecked는 체크박스의 해제 여부에 따라 변하는 State이다.

함수형 컴포넌트에서 State를 사용하기 위해서는 import { useState } from "react"를 통해 react에서 useState 컴포넌트를 가져와야 한다. 이후 const [isChecked, setIsChecked] = useState(false);를 통해 isChecked를 State가 저장되는 변수로, setIsChecked를 isChecked 갱신 함수로 선언하였다. useState뒤의 (false)는 state의 초기값을 의미한다.

체크박스가 변화되었을때(onChange) handleChecked라는 이벤트 핸들러 함수가 실행되면서 체크박스의 현재 체크여부가 isChecked에 재할당된다.

마치며

Props와 State까지 배우고 나니, React의 핵심은 Top-down이라고 생각한다. 상위 컴포넌트에서 하위 컴포넌트 순으로 Props가 전달되고 렌더링도 실행되기 때문에 컴포넌트를 만들때 구조를 잘 파악해서 적절한 위치에 State나 함수를 선언해주고 문제없이 자식 컴포넌트까지 전달될 수 있도록 해주는 것이 핵심이라고 생각했다.