props

React에서 props는 컴포넌트 간에 데이터를 전달하기 위해 사용하는 객체입니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터나 함수, 설정값 등을 전달할 때 주로 사용됩니다. "props"는 properties의 약자로, 컴포넌트의 속성처럼 생각할 수 있습니다.

※ props는 데이터 타입이 아닙니다. props는 React 컴포넌트에 전달되는 데이터를 가리키는 속성으로, 부모 컴포넌트가 자식 컴포넌트에 전달하는 값을 담는 JavaScript 객체입니다.

1. Props의 개념

• 데이터 전달: React의 컴포넌트는 기본적으로 고립되어 있으나, props를 통해 부모-자식 간 데이터 전달이 가능합니다.
• 불변성: props는 전달받은 컴포넌트에서 수정할 수 없고 읽기 전용입니다. 이는 컴포넌트가 예측 가능하게 동작하도록 합니다.
• 상속 대신 구성: props는 컴포넌트가 다른 컴포넌트를 구성하는 방식으로 활용되며, 객체나 배열처럼 다양한 타입의 값을 전달할 수 있습니다.

2. Props 사용법

예제 1: 기본적인 props 사용법

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

function Parent() {
  return (
    <div>
      <Child name="Mike" age={30} />
    </div>
  );
}

export default Parent;

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

function Child(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default Child;

설명:

• 부모 컴포넌트인 Parent에서 Child 컴포넌트에 name과 age라는 props를 전달합니다.
• 자식 컴포넌트인 Child는 전달받은 props 객체를 통해 props.name과 props.age를 사용하여 데이터를 표시합니다.

결과:

<Child />는 Name: Mike와 Age: 30을 화면에 출력합니다.

3. Props 구조 분해 할당

props가 많은 경우, 구조 분해 할당을 사용하면 코드가 더 간결해질 수 있습니다.

import React from 'react';

// 구조 분해 할당을 사용하는 자식 컴포넌트
function Child({ name, age, address, hobbies, isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <>
          <p><strong>Name:</strong> {name}</p>
          <p><strong>Age:</strong> {age}</p>
          <p><strong>Address:</strong> {address}</p>
          <p><strong>Hobbies:</strong></p>
          <ul>
            {hobbies.map((hobby, index) => (
              <li key={index}>{hobby}</li>
            ))}
          </ul>
        </>
      ) : (
        <p>Please log in to see your information.</p>
      )}
    </div>
  );
}

// 부모 컴포넌트
function Parent() {
  const user = {
    name: 'Alice',
    age: 28,
    address: '123 Main St, Springfield',
    hobbies: ['Reading', 'Traveling', 'Cooking'],
    isLoggedIn: true,
  };

  return (
    <div>
      <h1>User Information</h1>
      {/* props로 여러 속성을 전달합니다 */}
      <Child 
        name={user.name}
        age={user.age}
        address={user.address}
        hobbies={user.hobbies}
        isLoggedIn={user.isLoggedIn}
      />
    </div>
  );
}

export default Parent;

코드 설명

1. 구조 분해 할당으로 props 사용하기:
   • Child 컴포넌트에서 props로 받은 여러 속성을 name, age, address, hobbies, isLoggedIn 등으로 구조 분해 할당했습니다. 이제 props.name 대신 name과 같은 방식으로 간단하게 접근할 수 있습니다.
2. 조건부 렌더링:
   • isLoggedIn이 true일 경우 사용자 정보를 렌더링하고, 그렇지 않으면 “Please log in to see your information” 메시지를 표시합니다.
3. 리스트 렌더링:
   • hobbies 배열을 map 메서드를 사용하여 <li> 태그로 렌더링했습니다. 이 방식은 props로 전달되는 배열을 구조 분해 할당으로 받아 쉽게 사용할 수 있는 예입니다.

이 방식은 props가 많거나 자주 사용하는 경우 코드를 더 간결하고 가독성 있게 작성할 수 있도록 도와줍니다.

4. 기본 props 설정

props가 전달되지 않았을 때 기본값을 설정할 수도 있습니다. 이는 defaultProps를 사용하여 정의합니다.

function Child({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Child.defaultProps = {
  name: 'Unknown',
  age: 0
};

위와 같이 설정하면, name과 age가 없을 경우 Unknown과 0이 기본값으로 출력됩니다.

5. Props를 활용한 동적 렌더링

props는 동적 렌더링을 할 때 유용합니다. 예를 들어, isAdmin이라는 props를 통해 컴포넌트가 어떤 역할을 수행할지 결정할 수 있습니다.

function UserProfile({ name, isAdmin }) {
  return (
    <div>
      <h1>{name}</h1>
      {isAdmin ? <p>Admin Access Granted</p> : <p>Regular User</p>}
    </div>
  );
}

부모 컴포넌트에서 isAdmin을 true나 false로 전달하면, 사용자에 따라 다른 메시지가 렌더링됩니다.

6. 함수와 이벤트 핸들러를 props로 전달

부모 컴포넌트에서 자식 컴포넌트로 함수를 전달할 수도 있습니다. 이 방식은 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트가 처리하도록 할 때 유용합니다.

// 부모 컴포넌트
function Parent() {
  function handleAlert(message) {
    alert(message);
  }

  return <Child showAlert={handleAlert} />;
}

// 자식 컴포넌트
function Child({ showAlert }) {
  return (
    <button onClick={() => showAlert("Hello from Child!")}>
      Click me
    </button>
  );
}

이 예제에서 Parent 컴포넌트의 handleAlert 함수가 showAlert이라는 이름으로 Child 컴포넌트에 전달됩니다. Child에서 버튼을 클릭하면 showAlert이 실행되고, 부모 컴포넌트의 handleAlert 함수가 호출되어 경고 메시지가 표시됩니다.

7. Props의 타입 검증 (PropTypes)

React에서는 PropTypes를 사용하여 props의 타입을 검증할 수 있습니다. 이를 통해 전달된 props가 예상한 타입과 일치하는지 확인하여 오류를 방지할 수 있습니다.

import PropTypes from 'prop-types';

function Child({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Child.propTypes = {
  name: PropTypes.string.isRequired, // 문자열이며 필수
  age: PropTypes.number
};

위와 같이 설정하면 name이 반드시 문자열이어야 하며, 전달되지 않으면 오류가 발생합니다. age는 선택 사항으로 설정되어 있습니다.

8. Props의 중요성

• 컴포넌트 재사용성: props는 컴포넌트를 다른 곳에서 여러 번 사용하면서도 다양한 데이터로 다르게 렌더링할 수 있게 합니다.
• 컴포넌트 간 의사소통: 부모에서 자식으로 데이터를 전달함으로써, 컴포넌트 간 정보가 전달됩니다.
• 불변 데이터: props는 읽기 전용 데이터이므로 컴포넌트가 불필요하게 데이터를 변경하지 못하게 합니다. 데이터 변경은 부모에서만 할 수 있어 데이터 흐름이 예측 가능해집니다.

React에서 props는 컴포넌트 간 데이터를 관리하고, 컴포넌트를 더 유연하게 재사용하기 위한 중요한 개념입니다. 이를 통해 데이터 흐름을 제어하고, 컴포넌트의 재사용성을 높일 수 있습니다.