[리액트(React)] 컴포넌트 동적 설정

특정 컴포넌트에서 하위 컴포넌트를 직접 정의하지 않고, 넘겨받은 값으로 동적으로 설정하고 싶을 때가 있다.

컴포넌트를 동적으로 설정하면 컴포넌트를 재사용할 수 있고, 유연하게 적용할 수 있다.

동적으로 컴포넌트의 값을 설정하기 위한 두 가지 방법이 있다.

---

1. 변수 사용하기

상위 컴포넌트에서 하위 컴포넌트에 props로 요소를 넘겨준다.

return (
    <Tabs
        buttonsContainer="menu"
    >
        {tabContent}
    </Tabs>
);

하위 컴포넌트에서는 구조 분해 할당으로 요소를 넘겨받는다.

커스텀 컴포넌트는 대문자로 시작해야 하기 때문에 대문자로 시작하는 변수(상수)를 선언하여 wrapper 요소로 사용한다.

export default function Tabs({ children, buttons, buttonsContainer }) {
  const ButtonsContainer = buttonsContainer;
  return (
    <>
      <ButtonsContainer>{buttons}</ButtonsContainer>
      {children}
    </>
  );
}

---

2. props 이름을 대문자로 시작하게 하기

상위 컴포넌트에서 하위 컴포넌트에 props로 요소를 넘겨줄 때, props 이름을 대문자로 시작하게 정의한다.

return (
    <Tabs
        ButtonsContainer="menu"
    >
        {tabContent}
    </Tabs>
);

하위 컴포넌트에서는 구조 분해 할당으로 요소를 넘겨받는다.

이때 props 이름이 대문자로 시작하기 때문에 변수(상수)를 따로 선언하지 않고 바로 wrapper 요소로 사용할 수 있다.

export default function Tabs({ children, buttons, ButtonsContainer }) {
  return (
    <>
      <ButtonsContainer>{buttons}</ButtonsContainer>
      {children}
    </>
  );
}

---

// 내장 요소와 커스텀 컴포넌트의 차이

section, menu 등 내장 요소를 props로 넘겨줄 때 문자열 식별자로 넘겨준다.

return (
    <Tabs
        ButtonsContainer="menu"
    >
        {tabContent}
    </Tabs>
);

커스텀 컴포넌트를 props로 넘겨줄 때는 {함수명} 식별자로 넘겨준다.

return (
    <Tabs
        ButtonsContainer={TabButton}
    >
        {tabContent}
    </Tabs>
);

---

JavaScript에서 기본 매개변수를 사용하는 것처럼 기본값으로 정의해줄 수도 있다.

export default function Tabs({ children, buttons, ButtonsContainer = 'menu' }) {
  return (
    <>
      <ButtonsContainer>{buttons}</ButtonsContainer>
      {children}
    </>
  );
}

그러면 props를 넘겨주지 않고 wrapper 요소를 설정할 수 있어 코드가 간결해진다.

return (
    <Tabs>
        {tabContent}
    </Tabs>
);