[React] 3일차: 컴포넌트의 심장, Props와 State 완벽 이해

 

리액트 공부 3일차입니다!

오늘은 리액트 컴포넌트가 데이터를 다루는 두 가지 핵심 방식인 Props와 State에 대해 이야기 합니다.

이 두 개념만 제대로 이해해도 리액트의 절반은 이해했다고 할 수 있습니다.

1. Props (Properties)

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 '읽기 전용' 데이터입니다. 마치 함수의 매개변수(Parameter)와 비슷합니다.

• 특징: 자식 컴포넌트 입장에서는 전달받은 Props를 직접 수정할 수 없습니다. (불변성)
• 용도: 컴포넌트의 재사용성을 높이기 위해 외부에서 데이터를 주입할 때 사용합니다.

JavaScript

 

// 자식 컴포넌트
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

// 부모 컴포넌트에서 사용
<Greeting name="Ryon" />

2. State

State는 컴포넌트 '내부에서 관리되는' 동적인 데이터입니다. 사용자의 인터랙션(클릭, 입력 등)에 따라 화면이 바뀌어야 한다면 반드시 State를 사용해야 합니다.

• 특징: useState 훅을 통해 생성하며, 상태가 변경되면 리액트가 이를 감지하고 해당 컴포넌트를 자동으로 **리렌더링(Re-render)**합니다.
• 용도: 버튼 클릭 횟수, 입력창의 텍스트, 체크박스 상태 등 변하는 정보를 저장할 때 사용합니다.

JavaScript

 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 클릭 횟수: {count}</p>
      <button onClick={() => setCount(count + 1)}>클릭!</button>
    </div>
  );
}

3. 한눈에 비교하기: Props vs State

구분	Props	State
개념	컴포넌트 외부에서 전달받는 값	컴포넌트 내부에서 생성/관리하는 값
수정 가능 여부	읽기 전용 (수정 불가)	수정 가능 (setter 함수 사용)
영향력	부모가 자식의 값을 결정	컴포넌트 스스로 자신의 값을 결정

Copyright 2026. [버미] all rights reserved.