📑 [React] Props

728x90

오늘은 리액트(React)의 핵심 개념 중 하나인 props에 대해 알아보겠습니다.

props는 리액트 컴포넌트 간의 데이터 전달을 담당하며, 이를 통해 컴포넌트들이 재사용 가능하고 더 유연해집니다.

이 글에서는 props가 무엇인지, 어떻게 사용하는지, 그리고 주의할 점에 대해 자세히 설명하겠습니다.

Props란 무엇인가?

props는 'properties'의 줄임말로, 컴포넌트 간의 데이터 전달을 위해 사용되는 객체입니다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며,

자식 컴포넌트는 전달받은 props를 읽기 전용으로 사용할 수 있습니다.

이는 단방향 데이터 흐름(one-way data flow)을 보장하여 애플리케이션의 상태 관리를 용이하게 합니다.

Props 사용 방법

Props 전달하기

부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 방법은 매우 간단합니다.

자식 컴포넌트를 호출할 때 속성(attribute) 형태로 데이터를 전달하면 됩니다.

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <h1>부모 컴포넌트</h1>
      <ChildComponent name="React" age={5} />
    </div>
  );
}

export default ParentComponent;

Props 받기

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

// 자식 컴포넌트
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>자식 컴포넌트</h2>
      <p>이름: {props.name}</p>
      <p>나이: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

비구조화 할당(Destructuring)

비구조화 할당을 사용하면 props를 좀 더 간결하게 사용할 수 있습니다.

function ChildComponent({ name, age }) {
  return (
    <div>
      <h2>자식 컴포넌트</h2>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </div>
  );
}

결론

리액트에서 props는 컴포넌트 간의 데이터 전달을 담당하는 중요한 개념입니다.

이를 통해 컴포넌트를 재사용 가능하게 만들고, 데이터 흐름을 명확하게 관리할 수 있습니다.

위에서 설명한 내용을 바탕으로 props를 잘 활용하여 더 나은 리액트 애플리케이션을 개발하시길 바랍니다.