[DAY9] React State & Props

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

React의 Props와 State 개념, 이벤트 처리 방식, 제어 컴포넌트(Controlled Component), 그리고 React의 단방향 데이터 흐름에 대해 정리한다.

 

Props	부모 컴포넌트로부터 전달받은 값으로, 객체 형태이며 읽기 전용임. 하위 컴포넌트에 값을 전달할 때 사용함.
State	컴포넌트 내부에서 변화하는 값으로, useState Hook으로 선언함. state가 변경되면 컴포넌트가 리렌더링됨.
이벤트 처리	HTML과 달리 React에서는 카멜 케이스(camelCase)로 이벤트를 작성하고, 함수를 직접 전달함. 예) onClick={handleEvent}
제어 컴포넌트	사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트하는 컴포넌트임. 입력값이 항상 React state에 의해 제어됨.
React 데이터 흐름	데이터 전달의 주체는 부모 컴포넌트이며, 데이터는 부모에서 자식 방향으로 흐르는 단방향 데이터 흐름(one-way data flow)을 따름.

 

⭐Props

---

1. Props란?

• Props: 부모(상위) 컴포넌트로부터 전달받은 값으로, 컴포넌트의 속성을 의미한다.

형태	객체(Object) 형태
변경 가능 여부	읽기 전용(Read-only) — 컴포넌트 내부에서 변경 불가
예시	이름, 성별 등 외부에서 전달되는 고정된 속성

2. Props 사용법

Props는 아래 세 단계로 사용한다.

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

import "./styles.css";

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      {/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
      <Child />
    </div>
  );
}

function Child(props) {
  // console 을 열어 props 의 형태를 직접 확인하세요.
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

⭐State

---

1. State란?

• State: 컴포넌트 내부에서 변화하는 값이다.
• State가 변경되면 컴포넌트가 리렌더링된다.

변경 가능 여부	컴포넌트 내부에서 변경 가능
예시	나이, 사는 곳, 취업 여부 등 시간에 따라 변할 수 있는 값

 

2. State 사용법

🚀 1단계: React로부터 useState를 불러온다.

import { useState } from "react";

🚀 2단계: 컴포넌트 안에서 useState를 호출한다.

function CheckboxExample() {
  // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
}

useState 호출 시 반환되는 값의 의미는 아래와 같다.

항목	설명
isChecked	state를 저장하는 변수
setIsChecked	state인 isChecked를 변경하는 함수
useState	state Hook
false	state의 초깃값

🚀 3단계: JSX 엘리먼트 안에서 state를 불러와 사용한다.

// JSX에서 삼항연산자 사용
{isChecked ? "Checked!!" : "Unchecked"}

🚀 4단계: state 갱신 함수를 통해 state를 업데이트한다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      // checkbox 값 변경되면 onChange 이벤트 발생 -> handleChecked 호출 -> setIsChecked 호출 -> isChecked 변수 갱신
      <input type="checkbox" checked={isChecked} onChange={handleChecked} /> 
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

⭐이벤트 처리

---

• React의 이벤트 처리 방식은 HTML과 유사하지만 몇 가지 차이점이 있다.

구분	HTML	React
이벤트 이름 표기법	소문자 (예) onclick	카멜 케이스 (예) onClick
이벤트 핸들러 전달 방식	문자열로 전달 (예) "handleEvent()"	함수를 직접 전달 (예) {handleEvent}

⭐제어 컴포넌트(Controlled Component)

---

• 제어 컴포넌트(Controlled Component): 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트하는 컴포넌트이다.
• 입력 폼 요소의 값이 항상 React의 state에 의해 제어되므로 "진실의 단일 출처(Single Source of Truth)"를 유지할 수 있다.

import React, { useState } from "react";

export default function App() {
  const [username, setUsername] = useState("");

  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
      ></input>
    </div>
  );
}

위 코드에서 input의 값(value)은 항상 username state와 동기화된다. 사용자가 입력할 때마다 onChange가 호출되어 setUsername이 실행되고, state가 업데이트되어 화면이 리렌더링된다.

⭐React 데이터 흐름

---

• React는 페이지 단위가 아닌 컴포넌트 단위로 개발한다.
• 상향식(Bottom-up)으로 앱을 만든다. 즉, 페이지를 만들기 전에 컴포넌트를 먼저 만들고 조립하는 방식으로 개발한다.
• 데이터를 전달하는 주체는 부모 컴포넌트이다. 따라서 데이터의 흐름은 부모에서 자식 방향으로 내려오는 하향식(Top-down)이다.
• 이를 단방향 데이터 흐름(One-way Data Flow)이라고 한다.

특징	설명
컴포넌트 단위 개발	페이지 전체가 아닌 독립적인 컴포넌트 단위로 개발함
상향식(Bottom-up) 개발	작은 컴포넌트를 먼저 만들고 조립하여 상위 구조를 완성함
하향식(Top-down) 데이터 흐름	데이터는 항상 부모 → 자식 방향으로만 전달됨
단방향 데이터 흐름	데이터 흐름이 단방향이므로 애플리케이션의 상태 변화를 추적하기 쉬움

⭐후기

---

• useState의 동작 원리를 파악하면서 state가 변경될 때마다 컴포넌트가 리렌더링된다는 흐름이 자연스럽게 이해되었다.
• React의 단방향 데이터 흐름 덕분에 데이터의 출처가 명확해져 디버깅이 쉬워진다는 점이 인상적이었다. 자식 컴포넌트에서 부모의 state를 변경해야 할 때는 State 끌어올리기(Lifting State Up) 패턴을 활용해야 한다는 것도 함께 알게 되었다.

⭐참고자료

 

---

1) React 공식 문서, "Passing Props to a Component", https://react.dev/learn/passing-props-to-a-component

2) React 공식 문서, "State: A Component's Memory", https://react.dev/learn/state-a-components-memory

3) React 공식 문서, "Responding to Events", https://react.dev/learn/responding-to-events

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.