[React] Props to components

Props란?

• props는 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달해주는 객체이다. props는 리액트에서 어떠한 데이터를 전달해줄 때 리액트에선 props를 사용한다.

예시 (부모 컴포넌트)

import React from 'react';
import UserInfo from './UserInfo';

const ParentComponent = () => {
  // 사용자 정보
  const user = {
    name: 'zero hyun',
    age: 24,
    email: 'kyhh39@naver.com'
  };

  return (
    <div>
      {/* UserInfo 컴포넌트에 사용자 정보를 props로 전달 */}
      <UserInfo user={user} />
    </div>
  );
};

export default ParentComponent;

예시 (자식 컴포넌트)

import React from 'react';

const UserInfo = (props) => {
  // 부모 컴포넌트에서 전달받은 사용자 정보
  const { name, age, email } = props.user;

  return (
    <div>
      <h2>User Information</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
};

{/* name에는 zerohyun이, age에는 24, email에는 kyhh39@naver.com이 랜더링된다.*/}

export default UserInfo;

• 위의 코드에서 ParentComponent는 user 객체를 가지고 있고, 이 정보를 UserInfo 컴포넌트로 전달한다. UserInfo 컴포넌트에서는 props를 통해 전달받은 사용자 정보를 사용하여 화면에 랜더링 한다.

• 이렇게 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하면, 자식 컴포넌트는 전달받은 props를 활용하여 렌더링할 수 있다.

예시 (자식 컴포넌트, 구조분해할당)

import React from 'react';

const UserInfo = ({ user }) => {
  // 구조 분해 할당을 통해 props.user를 직접 꺼내온다.
  const { name, age, email } = user;

  return (
    <div>
      <h2>User Information</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
};

export default UserInfo;

• 위의 코드에서 자식 컴포넌트의 UserInfo 함수 컴포넌트에서 props 대신에 { user }를 인자로 받아온다. 구조 분해 할당을 통해 props 객체에서 user 속성을 직접 꺼내와서 사용한다. 이렇게 하면 코드가 더 간결해지며 가독성이 향상된다.

자식은 props를 바꿀까?

• 기본적으로 자식은 props를 바꾸지 않는다. 왜냐하면 부모가 자식에게 물려준 데이터 이기 때문에 바꾸게 되면 뜻하지 않게 부모도 바뀌게 되기 때문이다. props는 자식이 바꾸려면 useState로 state로 만들고 바꿔야 부모에 영향이 안미친다.

• 출처 : https://youtu.be/aYwSrzeyUOk?si=wmfMhWn4YrhixeZV (제로초 유튜브)
• 출처 : https://react.vlpt.us/?q= (벨로퍼트와 함께하는 모던 리액트)