상위 컴포넌트와 하위 컴포넌트간의 import 관련 이슈

[요약]

—> 아래 관계에서는 상위 컴포넌트의 React import한 경우 하위에서 

다시 React를 import안해도 사용가능 

<상위 컴포넌트> 

<하위 컴포넌트 />

</상위 컴포넌트> 

[주의사항]

—> 하위에서 다시 React를 import할 경우 테스트할 때

상위에서 이미 React가 import되어 있으므로 state를 인식하지 못할 수 있음 

—> 이때는 하위 컴포넌트의 import React from ‘react’; 에서

‘React’부분을 제거

—> import {useState} from ‘react’ 같은 사용할 함수만 import 할 것

 

[자세한 설명]

—> 상위 컴포넌트에서 import React from ‘react’라고 React 라이브러리를 

import한 경우 

—> 하위 컴포넌트에서 따로 import React from ‘react’;라고 하지 않아도 상위 컴포넌트에서 import한 React 라이브러리를 사용할 수 있다.

—> 전역으로 React가 설정됨(하위 컴포넌트에서 모두 사용 가능)

 

Ex) App.js에서 <App> 컴포넌트를 생성했을때 

<App>컴포넌트 내부에 <Gallery>컴포넌트가 하위 컴포넌트로 포함된 경우 

<App> 컴포넌트에서 import React from ‘react’;한 경우에는 

하위 컴포넌트인 <Gallery>에서는 반복적으로 import React from ‘react’; 를 작성하여 import하지 않아도 React 라이브러리를 사용 할 수있다.

[React 라이브러리를 import한 상위 컴포넌트]

[따로 라이브러리를 import하지 않고 상위 컴포넌트에서 import한 라이브러리를 사용하는 하위 컴포넌트]