Dynamic Components (동적 컴포넌트), :is attribute
조건에 따라 렌더링 되는 html 요소를 변경하고 싶었고 해결방안으로 사용된 Dynamic Components와 :is
상황
버튼 컴포넌트를 작업하면서 생긴 이슈이다.
디자인이 버튼모양으로 역활이 Button, Anchor로도 사용되고 있는 상황이였고 같은 디자인을 가졌는데 굳이 따로 만들 필요가 없을 것 같아서 버튼 컴포넌트 한가지로 링크(href)가 있으면 a
로도 렌더링되고 button
요소로도 렌더링이 되었으면 했다.
처음 작업한 코드
리뷰해주신 프론트 개발자분이 a
랑 button
이 props
도 마크업구조도 다 동일하다. 라는 리뷰는 해주셨다.
그러게요...ㅜㅜ 저도 그 부분이 참 걸렸고 props
가 추가 될 때 마다 아래위로 다 넣어줘야해서 불편했는데 방법을 찾아보자!
리팩토링한 코드
구글링으로 찾다보니 Dynamic Components가 있었다. 바로 적용을 해보았고 깜끔했다.
아래는 :is
prop 에는 문자열이나 컴포넌트 이름을 넣을 수 있다. 자세한건 아래 참고 링크들을 면 된다.
참고링크
Last updated