react에서 props란?

Props는 React에서 컴포넌트 간에 데이터를 전달하는 방법입니다. Props는 "properties"의 줄임말로, 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. Props는 읽기 전용이며, 컴포넌트 내부에서는 변경할 수 없습니다. 이는 컴포넌트가 순수 함수처럼 동작하도록 하여, 예측 가능한 동작을 보장합니다.

Props 사용 방법

Props를 사용하는 기본적인 방법은 다음과 같습니다:

1. Props 전달하기: 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는, 자식 컴포넌트 태그의 속성으로 추가합니다.

jsx

// 부모 컴포넌트
function ParentComponent() {
  return <ChildComponent name="John" age={30} />;
}

1. Props 사용하기: 자식 컴포넌트에서는 함수의 매개변수로 props를 받아 사용할 수 있습니다.

jsx

// 자식 컴포넌트
function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

1. 구조 분해 할당 사용: 자식 컴포넌트에서 props를 받을 때, 구조 분해 할당을 사용하여 더 간결하게 코드를 작성할 수 있습니다.

jsx

// 자식 컴포넌트, 구조 분해 할당 사용
function ChildComponent({ name, age }) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

Props의 특징

• 읽기 전용: Props는 컴포넌트 내부에서 변경할 수 없습니다. 만약 컴포넌트 내부에서 데이터를 변경해야 한다면, 상태(state)를 사용해야 합니다.
• 재사용성: Props를 사용하여 컴포넌트에 다양한 데이터를 전달함으로써, 컴포넌트의 재사용성을 높일 수 있습니다.
• 단방향 데이터 흐름: 데이터는 항상 부모 컴포넌트로부터 자식 컴포넌트로만 흐릅니다. 이는 애플리케이션의 데이터 흐름을 예측하기 쉽게 만들어 줍니다.

Props를 통해 컴포넌트 간의 상호작용과 데이터 전달을 효율적으로 관리할 수 있으며, React 애플리케이션의 구조를 이해하는 데 중요한 개념입니다.