외부에서 컴포넌트 생성 (컴포넌트의 확장성, 재활용성)

부모3 (props A 전달)

↓↓

부모2 (props A 전달)

↓↓

부모1 (props A 전달)

↓↓

자식 ImageFileInput (props A를 수신 → 작동)

 

 

** 자식은 어떠한 기능을 작동시키기 위해 부모로 부터 필요한 props를 받아야한다.

위와 같이 props를 전달 전달하게 될 경우 만약 부모 또는 자식 컴포넌트가 props A 뿐만 아니라 B, C, D 등 n개를 가지고 있을 경우 가독성이 좋지 않다.

 

부모3 (확장성이 높고 재활용 가능한 컴포넌트를 만든다 ImageFileInput )

- 기능 수행을 담당할 자식 컴포넌트를 부모3 컴포넌트 안에서 생성한다.

 

// #1

const Fileinput = <ImageFileInput imageUploader={imageUploader} />

설명: 위와 같이 컴포넌트를 만들 수 있으나 ImageFileInput 컴포넌트에 imageUploader와 같이 props를 개별적으로 하나씩 넣어줘야 한다. (예: propsA={propsA} propsB={propsB} propsC={propsC} )

 

#2

const Fileinput = props => {
  <ImageFileInput { ...props } imageUploader={imageUploader} />
}

설명: ImageFileInput 컴포넌트를 함수로 스코프화 한뒤 Fileinput 에 넣는다. 위와 같이 선언해 ImageFileInput 컴포넌트의 확장성과 재활용성을 높일 수 있다.

 

★ 컴포넌트는 첫 알파벳을 대문자로 써야 한다. props으로 전달할때도 대문자로 표기해야한다.

 

#1

 

 

#2, 이때 부모컴포넌트 #1은 자식컴포넌트에게 propA 뿐만아니러 B, C, D ... 더 넣어 자식들에게 패키지로 전달할 수 있다.

 

문법 {...props} 을 "Spread Attributes"라고 하더라.

function App1() {
 return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
 const props = {firstName: 'Ben', lastName: 'Hector'};
 return <Greeting {...props} />;}

 

https://reactjs.org/docs/jsx-in-depth.html

JSX In Depth – React