[React] 다양한 Slot 활용 방법

children

Component의 Props에는 children이라는 고유 속성이 있습니다.

 

Component 사이에 작성한 코드(아래 이미지에서 ul 태그)를 Props로 넘겨줍니다.

 

Props

props로 코드를 넘겨줄 수도 있습니다.

tabContent는 children으로, buttons props는 buttons로 slot을 사용하는 것을 볼 수 있습니다.

 

위 이미지에서 menu 태그가 아닌 동적으로 설정하고 싶을 수 있습니다.

그런 경우에도 props로 넘겨줄 수 있습니다.

컴포넌트는 대문자로 시작하기 대문자 변수로 새로운 상수를 만들어 사용합니다.

 

처음부터 대문자로 넘겨주어도 됩니다.

 

만약 태그가 아닌 컴포넌트를 가져오고 싶다면

Section(), <Section /> 이 아닌 컴포넌트 함수의 이름만 넘겨주어야 합니다.

 

부모에서 props로 선언하지 않아도 기본 값을 설정 할 수 있습니다.