[React18] 합성

  >> 컴포넌트에서 다른 컴포넌트를 담기   

     -  틀을 잡고, 도화지에 기반을 다진다. 

  =틀을잡고 : 나는 쉽게 뼈대를 만든다고 생각했다 뼈대 컴포넌트

 

 = 도화지에 기반을 다진다 : 도화지는 Frames를 그려줄 BuildUp 함수를 말하고 기반을 다진다는것은

    >>도화지BuildUP에  틀을 잡은Frames의  {props.children} 에 기반을 다져준다는 것이다.

 

이때 이방식은 여러 가지 방식으로도 사용할 수 있습니다.똑같은 방식으로 

틀을잡고, 도화지에 틀에 기반을 다져줍니다. 

 

>>틀을다져 줍니다. 이번에는 2곳을 props를 통해서 전달받습니다.

 

 >> 도화지에 틀을다져 줍니다.

 >> 이번에는 Frames 안에서 직접 태그를 사용하여 그려준것이 아니라 이미 생성해 놓은 함수를 

props를 통하여 틀에 전달해 주었습니다.

 

>>미리 만들어 놓은 컴포넌트

 

 

이렇게 React 엘리먼트는 단지 객체이기 때문에 다른 데이터 처럼 props를 통하여 전달할 수 있습니다.

 

 

특수화

 >> React에서는 더 '구체적인' 컴포넌트가  '일반적인' 컴포넌트를 렌더링하고 props를 통해 내용을 구성합니다.

 

이것도 간단히 생각하여 한번 해보겠습니다. (이번에는 도화지에 기반을 다지는 것을 세분화하여 도화지, 기반을 다진다) 로 나눠보겠습니다.

1  >> 틀을 잡고 : 틀의 {props.children} 은 기반을다지는(2번) 컴포넌트에서 받고

2 >> 기반을 다지고 : 기반을 다지면서 사용되는 {props.title} , {props.message} 는 도화지(3번)에서 받는다

3 >> 도화지에 그린다.

 

 

1 ⊂ 2 ⊂ 3 

>>

props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공합니다. 컴포넌트가 원시 타입의 값, React 엘리먼트 혹은 함수 등 어떠한 props도 받을 수 있다고한다.

>> 

또한 UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript 모듈로 분리하는 것이 좋습니다. 컴포넌트에서 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있습니다.