[React]스프레드 연산자를 통한 속성 전달 방식- id 전달

 

 

🎈 속성(props) 전달에서 발생하는 문제와 해결 방법

리액트에서 커스텀 컴포넌트에 속성을 전달할 때, HTML의 기본 속성인 id나 className 같은 속성이 정상적으로 전달되지 않는 문제가 발생할 수 있습니다. 이 문제를 해결하는 방법과 함께, Forwarded Props를 이용해 어떻게 이러한 속성들을 전달할 수 있는지 설명해 보겠습니다.

 

 

1. 기본 코드 예시

먼저, 아래와 같은 기본 코드를 봅시다:

function UserProfile({name, age, children}) {
  return (
    <div >
      <h2>{name}</h2>
      <p>{age} years old</p>
      <div>{children}</div>  {/* 자식 요소 출력 */}
    </div>
  );
}

function App() {
  return (
    <UserProfile id="profile" className="user" name="John" age={30}>
      user
    </UserProfile>
  );
}

위 코드에서는 App 컴포넌트에서 UserProfile 컴포넌트로 id와 className을 전달하고 있습니다. 하지만 커스텀 컴포넌트인 UserProfile은 HTML 기본 속성을 자동으로 전달하지 않기 때문에, id="profile"과 className="user"가 실제로 div 태그에 적용되지 않습니다.

 

 

2. 문제점: 속성이 전달되지 않음

리액트에서 UserProfile 같은 커스텀 컴포넌트는 JSX에서 전달받은 속성을 기본적으로 DOM 요소로 전달하지 않습니다. 예를 들어, id와 className은 UserProfile 컴포넌트 내부에서 사용되지 않으며, 이 때문에 CSS가 적용되지 않습니다.

 

 

3. 해결 방법 1: 명시적으로 전달하기

이 문제를 해결하려면, UserProfile 컴포넌트에서 id와 className 속성을 명시적으로 div 태그에 전달해야 합니다.

function UserProfile({ name, age, children, id }) {
  return (
    <div id={id}>
      <h2>{name}</h2>
      <p>{age} years old</p>
      <div>{children}</div>  {/* 자식 요소 출력 */}
    </div>
  );
}

function App() {
  return (
    <UserProfile id="profile" className="user" name="John" age={30}>
      user
    </UserProfile>
  );
}

위처럼 UserProfile 컴포넌트 내에서 id={id}와 같은 방식으로 속성들을 명시적으로 전달하면, id와 className이 div 태그에 적용됩니다. 하지만, 만약 전달할 속성이 많아진다면, 코드가 복잡해질 수 있습니다.

 

 

4. 해결 방법 2: 구조분해할당과 스프레드 연산자 사용하기

속성 전달을 더욱 간단하게 처리하려면, 구조분해 할당과 스프레드 연산자(...props)를 사용할 수 있습니다. 이렇게 하면, UserProfile 컴포넌트에서 전달받은 모든 속성들을 자동으로 div 태그에 전달할 수 있습니다.

function UserProfile({ name, age, children, ...props }) {// 'name', 'age', 'children'을 구조분해하고, 나머지 props는 'div'에 전달
  return (
    <div {...props}> {/* 모든 속성(props)을 div에 전달 */}
      <h2>{name}</h2>
      <p>{age} years old</p>
      <div>{children}</div>  {/* 자식 요소 출력 */}
    </div>
  );
}

function App() {
  return (
    <UserProfile id="profile" className="user" name="John" age={30}>
      user
    </UserProfile>
  );
}

위와 같이 스프레드 연산자(...props)를 사용하면, UserProfile 컴포넌트로 전달된 모든 속성이 div 태그에 자동으로 적용됩니다. 이제 id, className, 그리고 다른 속성들도 문제없이 div 태그에 전달되어 적용됩니다.

 

 

5. 결과

위 코드에서는 id="profile"과 className="user"가 div 태그에 정상적으로 적용되어, 스타일링이 잘 이루어집니다. 브라우저에서 렌더링된 HTML은 다음과 같을 것입니다:

<div id="profile" class="user">
  <h2>John</h2>
  <p>30 years old</p>
  <div>user</div>
</div>