컴포넌트 props에 따라 동적으로 렌더링하기 - prgrms-web-devcourse/Team_Alchomist_ShakeNMatch_FE GitHub Wiki

문제점

아이콘 컴포넌트를 만드는 과정에서 프롭스로 받는 값에 따라 동적으로 렌더링 하는 방법을 알지 못했다. 자바스크립트에서 객체 프로퍼티를 사용하는 방법을 제대로 알고 있지 못했기 때문이다.

해결방법

핵심은 다음과 같다. 자바스크립트에서 객체를 사용할 때, 객체의 속성 값에 접근하는 방법에는 2가지가 있다.

myCar.make = "Ford";
myCar["make"] = "Ford";

자바스크립트에서 객체에 접근할 때, 점 표기법으로 객체의 속성에 접근할 수도 있지만, 대괄호 표기법으로 스트링 값을 사용하여 접근할 수도 있다. 따라서 다음과 같이 해결이 가능하였다.

const Icon = ({ type, color, size, ...props }: IconProps): ReactElement => {
  const Name = ICON_TYPES[type];
  return <Name />;
};

프롭스로 'type'이라는 값을 받아올 때 그 타입을 스트링 값으로 받아오게 지정해준면, 대괄호 표기법으로 미리 지정해 둔 ICON_TYPES의 프로퍼티에 접근이 가능하게 된다. 그리고 그 값을 컴포넌트로 활용하기 위해 하나의 변수 값에 할당해준다. 이때 JSX 문법으로 활용하기 위해서 변수 네이밍을 파스칼 케이스 형식으로 생성한다. 따라서 'type'으로 받아온 변수 값에 따라서 Name의 값을 동적으로 받아올 수 있고, 그 값을 컴포넌트로 리턴하기 때문에 동적으로 렌더링이 가능하였다.

참고 문서

자바스크립트 객체란? 리액트 JSX란?

⚠️ **GitHub.com Fallback** ⚠️