[React] Props 전달 방법 10가지 예제로 살펴보기

리액트에서 props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 중요한 메커니즘입니다. 이 문서에서는 기본 props 전달부터 스프레드 연산자, Context API, 그리고 children을 사용한 props 전달까지 다양한 10가지 방법을 다룹니다. 각각의 방식이 코드의 가독성과 유지 보수성을 높이는 데 어떻게 기여하는지 실용적인 예제를 통해 쉽게 이해할 수 있습니다.🙂

 

1️⃣ 기본 props 전달

가장 기본적인 방법으로, 부모 컴포넌트에서 자식 컴포넌트로 직접 props를 전달합니다.

// 부모 컴포넌트
function Parent() {
  // 'color'라는 이름의 props를 Child 컴포넌트에 전달합니다.✨
  return <Child color="blue" />;
}

// 자식 컴포넌트
function Child(props) {
  // props 객체를 통해 전달받은 'color' 값을 사용하여 스타일을 적용합니다.
  // 'props.color'를 통해 접근하여 'color' 값을 가져옵니다.✨
  return <div style={{ color: props.color }}>This text is {props.color}!</div>;
}

export default Parent;

 

2️⃣ 구조 분해 할당(Destructuring)을 사용한 props 추출

구조 분해 할당(Destructuring)을 사용하면, props에서 특정 값만 추출하여 사용할 수 있어 코드가 더 간결해집니다.

＊ 구조 분해 할당 : 객체나 배열의 특정 속성이나 요소를 쉽게 추출하여, 변수에 직접 할당할 수 있도록 해주는 JavaScript 문법입니다. 이를 통해 코드가 더 간결하고 가독성이 좋아집니다.

// 부모 컴포넌트
function Parent() {
  // 'color'라는 이름의 props를 Child 컴포넌트에 전달합니다.
  return <Child color="blue" />;
}

// 자식 컴포넌트
function Child({ color }) {
  // 구조 분해 할당을 사용하여 props 객체에서 'color'라는 값을 직접 받아옵니다.
  // 이를 통해 'props.color' 대신 바로 'color'로 접근할 수 있어 코드가 간결해집니다.✨
  return <div style={{ color }}>This text is {color}!</div>;
}

export default Parent;

 

3️⃣ 스프레드(Spread) 연산자를 사용한 props 전달

부모 컴포넌트에서 여러 개의 props를 전달할 때, 스프레드 연산자(...)를 사용하여 한 번에 전달할 수 있습니다.

＊ 스프레드 연산자 : 배열이나 객체의 모든 요소를 개별적으로 분해하여 사용할 수 있게 해주는 JavaScript 문법입니다. 이를 통해 배열이나 객체를 복사하거나 합칠 때 유용하게 사용할 수 있습니다.

// 부모 컴포넌트
function Parent() {
  const props = {
    message: "Hello from Parent",
    color: "blue",
    fontSize: "16px",
  };

  // 스프레드 연산자를 사용하여 모든 props를 한 번에 자식 컴포넌트에 전달합니다.✨
  return <Child {...props} />;
}

// 자식 컴포넌트
function Child({ message, color, fontSize }) {
  // 구조 분해 할당을 사용하여 전달받은 props에서 'message', 'color', 'fontSize'를 추출합니다.✨
  // 이를 통해 각 값을 쉽게 사용할 수 있습니다.
  return <div style={{ color, fontSize }}>{message}</div>;
}

export default Parent;

 

4️⃣ 기본값 설정 (Default Props)

컴포넌트에서 props가 전달되지 않았을 경우 기본값을 설정하는 방법은 함수 매개변수 기본값을 사용하는 방법과 `defaultProps`를 사용하는 방법이 있습니다.

// 자식 컴포넌트
function Child({ message = "Default Message" }) {
  // 'message'가 전달되지 않았을 경우 기본값을 사용합니다.✨
  return <div>{message}</div>;
}

// 또는 defaultProps를 사용해 기본값을 설정할 수 있습니다.✨
Child.defaultProps = {
  message: "Default Message",
};

export default Child;

 

5️⃣ 형식 지정 props (PropTypes 사용)

컴포넌트가 받는 props의 유형을 지정할 수도 있습니다. 이는 주로 개발 중에 유용하며, PropTypes를 사용하여 설정합니다.

import PropTypes from 'prop-types';

// 자식 컴포넌트
function Child({ message }) {
  // 'message'를 화면에 출력합니다.
  return <div>{message}</div>;
}

// 'message' props의 타입을 문자열로 지정하고 필수로 요구합니다.✨
Child.propTypes = {
  message: PropTypes.string.isRequired,
};

export default Child;

 

6️⃣ 콜백 함수를 통한 props 전달

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 뿐만 아니라, 자식 컴포넌트에서 부모 컴포넌트로 이벤트나 데이터를 전달할 때는 콜백 함수를 사용합니다.

// 부모 컴포넌트
function Parent() {
  // 자식 컴포넌트에서 호출할 함수를 정의합니다.
  const handleChildClick = (data) => {
    console.log("Data from child:", data);
  };

  // 자식 컴포넌트에 'onClick' 콜백 함수를 전달합니다.✨
  return <Child onClick={handleChildClick} />;
}

// 자식 컴포넌트
function Child({ onClick }) {
  // 버튼 클릭 시 부모로부터 전달받은 콜백 함수를 호출합니다.
  return <button onClick={() => onClick("Hello from Child")}>Click Me</button>;
}

export default Parent;

 

7️⃣ 조건부 props 전달

특정 조건에 따라 props를 선택적으로 전달할 수 있습니다.

// 부모 컴포넌트
function Parent({ show }) {
  // 'show'가 true일 때만 'message' props를 전달합니다.✨
  return <Child message={show ? "Visible" : undefined} />;
}

// 자식 컴포넌트
function Child({ message }) {
  // 'message'가 없을 경우 기본 메시지를 표시합니다.
  return <div>{message ? message : "No message"}</div>;
}

export default Parent;

 

8️⃣ Context를 사용한 전역 props 전달

리액트의 Context API를 사용하면 컴포넌트 트리의 깊은 곳까지 props를 직접 전달하지 않고도 값을 공유할 수 있습니다. 이는 전역 상태 관리에 유용합니다.

import React, { createContext, useContext } from 'react';

// Context를 생성합니다.✨
const MyContext = createContext();

// 부모 컴포넌트
function Parent() {
  const value = "Hello from Context";

  // Context Provider를 사용하여 자식 컴포넌트에 값을 전달합니다.✨
  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
}

// 자식 컴포넌트
function Child() {
  // useContext 훅을 사용하여 Context 값을 사용합니다.✨
  const message = useContext(MyContext);

  return <div>{message}</div>;
}

export default Parent;

 

9️⃣ children을 통한 props 전달

React 컴포넌트는 특별한 props인 children을 통해 컴포넌트 내부에 HTML 요소나 다른 컴포넌트를 삽입할 수 있습니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트로 유연하게 콘텐츠를 전달할 수 있으며, 기본 레이아웃을 잡을 때 매우 유용합니다.

// 부모 컴포넌트
function Parent() {
  // 'color'라는 이름의 props를 전달하고, 'children'을 통해 자식 컴포넌트에 콘텐츠를 전달합니다.
  // 'children'은 부모 컴포넌트에서 자식 컴포넌트 태그 사이에 작성된 요소들을 의미합니다.
  // 여기서는 <h1>Hello, World!</h1>가 'children'으로 전달됩니다.✨
  return (
    <Child color="blue">
      {/* 이 콘텐츠가 자식 컴포넌트의 'children' props로 전달됩니다. */}
      <h1>Hello, World!</h1>
    </Child>
  );
}

// 자식 컴포넌트
function Child({ color, children }) {
  // 'color' props와 'children'을 사용하여 콘텐츠를 렌더링합니다.✨
  return (
    <div style={{ color }}>
      {children}
    </div>
  );
}

export default Parent;

 

🔟 Render Props 패턴을 사용한 props 전달

Render Props 패턴을 사용하면 함수형으로 자식 컴포넌트를 전달하여 자식 컴포넌트가 부모 컴포넌트의 데이터를 렌더링할 수 있습니다.

// 부모 컴포넌트
function Parent({ render }) {
  const data = "Hello from Parent";

  // 'render' 함수를 사용하여 자식 컴포넌트에 데이터를 전달합니다.✨
  return <div>{render(data)}</div>;
}

// 사용 예시
function App() {
  return (
    <Parent render={(data) => <Child message={data} />} />
  );
}

// 자식 컴포넌트
function Child({ message }) {
  return <div>{message}</div>;
}

export default App;