---

Prop (Properties)

Prop은 리액트에서 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 특성입니다. Props는 단방향 데이터 흐름을 가지며, 자식 컴포넌트에서는 수정할 수 없는 읽기 전용 데이터입니다.

Prop의 주요 특징

1. 단방향 데이터 흐름

• 데이터는 항상 상위에서 하위로 전달됩니다.
• 하위 컴포넌트는 상위 컴포넌트의 상태를 직접 수정할 수 없습니다.

2. 읽기 전용

• Props는 자식 컴포넌트에서 읽을 수 있지만 수정할 수 없습니다. 자식 컴포넌트에서 Prop을 수정하려고 하면 오류가 발생합니다.

3. 전달 형식

• 문자열은 큰따옴표(" "), 그 외의 값(객체, 배열 등)은 중괄호({ })로 전달합니다.

---

Prop 사용법

1. 기본 사용법

상위 컴포넌트에서 하위 컴포넌트에 데이터를 전달하는 기본적인 방법입니다.

// 상위 컴포넌트
const ParentComponent = () => {
  return <ChildComponent title="Hello World" />;
};

// 하위 컴포넌트
const ChildComponent = (props) => {
  return <h1>{props.title}</h1>;
};

2. 여러 개의 Prop 전달

여러 개의 Prop을 동시에 전달할 수 있습니다.

const ParentComponent = () => {
  return <ChildComponent title="Hello" subtitle="Welcome!" />;
};

const ChildComponent = ({ title, subtitle }) => {
  return (
    <>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </>
  );
};

3. 비구조화 할당

Props를 비구조화 할당을 통해 간편하게 사용할 수 있습니다.

const ChildComponent = ({ title, subtitle }) => {
  return (
    <>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </>
  );
};

4. props.children

props.children은 하위 컴포넌트 내에서 자식 요소를 렌더링할 때 사용됩니다. 이를 통해 컴포넌트 내부에 다른 컴포넌트를 포함할 수 있습니다.

const Wrapper = ({ children }) => {
  return <div className="wrapper">{children}</div>;
};

// 사용 예시
const App = () => {
  return (
    <Wrapper>
      <h1>Hello World</h1>
      <p>This is a child component!</p>
    </Wrapper>
  );
};

5. 상태(state) 값 연동

상위 컴포넌트의 state를 하위 컴포넌트에 전달하여 연동할 수 있습니다.

import React, { useState } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

const ChildComponent = ({ count }) => {
  return <h2>Current Count: {count}</h2>;
};

6. defaultProps

Props에 기본값을 설정할 수 있습니다. 이를 통해 컴포넌트가 Props를 받지 않았을 때 기본값을 제공할 수 있습니다.

const ChildComponent = ({ title, subtitle }) => {
  return (
    <>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </>
  );
};

ChildComponent.defaultProps = {
  title: "Default Title",
  subtitle: "Default Subtitle"
};

---

조건부 렌더링

Props를 이용하여 조건부 렌더링을 수행할 수 있습니다. 특정 조건에 따라 컴포넌트의 내용이나 구조를 다르게 렌더링할 수 있습니다.

조건부 렌더링 예제

const Greeting = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
};

// 사용 예시
const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <div>
      <Greeting isLoggedIn={loggedIn} />
      <button onClick={() => setLoggedIn(!loggedIn)}>
        Toggle Login
      </button>
    </div>
  );
};

---

Prop 전파 (Prop Drilling)

• Props는 여러 컴포넌트를 거쳐 전파될 수 있으며, 이를 Prop Drilling이라고 합니다.
• 컴포넌트가 깊어질수록 상위 컴포넌트의 state 및 기능 의존성이 커집니다.
• Prop Drilling이 과도해지면 관리가 어려워질 수 있으며, 데이터의 흐름을 추적하기 힘들어질 수 있습니다.

장점

• 필터링, 예외 처리, 예외 상황 대처 등을 위한 유연한 데이터 전달이 가능합니다.

단점

• 깊은 구조의 컴포넌트에서는 데이터를 전달하는 데 복잡성이 증가합니다.
• 특정 Prop이 어떤 컴포넌트에서 어떻게 수정되는지 추적하기 어려워질 수 있습니다.

Prop을 효과적으로 사용하기 위한 팁

1. Context API 사용 고려: Prop Drilling이 심각해지는 경우, 리액트의 Context API를 사용하여 데이터를 전역적으로 관리할 수 있습니다.
2. 커스텀 훅 사용: 상태와 관련된 로직을 커스텀 훅으로 분리하면 코드의 가독성을 높일 수 있습니다.
3. 명확한 Prop 이름 사용: Props 이름을 명확하게 지어주어, 데이터를 전달할 때 어떤 정보인지 쉽게 알 수 있도록 합니다.
4. TypeScript 사용 고려: TypeScript를 사용하면 Prop의 타입을 정의할 수 있어, 데이터 타입을 미리 검증하고 오류를 줄일 수 있습니다.

결론

Prop은 리액트에서 컴포넌트를 연결하고 데이터를 전달하는 중요한 메커니즘입니다. 올바르게 사용하면 재사용성과 관리의 용이성을 극대화할 수 있습니다. 하지만 Prop Drilling이 과도해지지 않도록 주의하는 것이 중요하며, 필요한 경우 Context API 등의 대안을 고려하는 것이 좋습니다.

---

이렇게 Prop에 대한 내용을 더 자세히 정리해 보았습니다! 필요한 부분이나 추가할 내용이 있다면 언제든지 말씀해 주세요.