React State & Props

리액트에서의 props와 state는 컴포넌트의 핵심 개념이다.

이 두 가지를 이해하는 것은 컴포넌트 기반 개발에서 매우 중요하다. 각각의 역할과 사용 방법을 자세히 알아보자.

Props (Properties)

Props는 컴포넌트 외부로부터 전달받는 값이다. 이는 주로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. Props의 특징을 살펴보면:

• 불변성: Props는 전달받은 후 내부에서 수정될 수 없다. 이는 리액트의 데이터 흐름이 단방향임을 의미한다.
• 객체 형태: Props는 자바스크립트 객체 형태로 전달되며, 키-값 쌍을 통해 각 값에 접근할 수 있다.
• 읽기 전용: 자식 컴포넌트는 props를 직접 변경할 수 없으며, 값을 사용하기 위해 중괄호 {}를 활용하여 접근한다. 예를 들어, props.text로 접근할 수 있다.

예를 들어, Parent 컴포넌트에서 Child 컴포넌트로 text라는 props를 전달하는 경우는 다음과 같다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text="Hello from Parent" />
    </div>
  );
}

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

State

State는 컴포넌트 내부에서 관리되며 변화할 수 있는 값이다. 컴포넌트의 동적인 상태를 관리하기 위해 사용된다.

• 변경 가능: State는 useState 훅을 통해 초기값과 함께 선언되고, 상태 변경 함수를 통해 업데이트될 수 있다.
• 컴포넌트 내부에서 유효: State는 선언된 컴포넌트 내에서만 유효하며, 다른 컴포넌트로 직접 전달되지 않는다. 데이터를 다른 컴포넌트로 전달하기 위해서는 props를 사용해야 한다.

예를 들어, Checkbox 컴포넌트에서 체크박스의 상태를 관리하는 방법은 다음과 같다.

import React, { useState } from 'react';

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

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
      <p>{isChecked ? "Checked" : "Unchecked"}</p>
    </div>
  );
}

이 예시에서 Checkbox 컴포넌트는 isChecked라는 state를 사용하여 체크박스의 상태를 관리하며, 사용자의 클릭에 따라 이 상태가 변경된다.

 

결론

리액트에서 props와 state는 각각 불변성과 가변성을 가지며, 컴포넌트의 데이터 흐름과 상태 관리에 핵심적인 역할을 한다. Props는 주로 데이터를 전달하는 데 사용되고, state는 컴포넌트의 내부 상태를 관리하는 데 사용된다.