(React) 컴포넌트를 내보내는 방법(디폴트, 네임드)

미분류 / 글쓴이

React에서 내보내기란 무엇입니까?

React로 무언가를 개발할 때 페이지는 구성 요소로 나누어 구성됩니다.

따라서 상위 구성 요소가 여러 하위 구성 요소를 가져오는 상황이 발생합니다.

가져오기 위해서는 하위 구성 요소를 내보내야 합니다.

요약하다, 출구컴포넌트 재사용을 위해 가져오기 권한 설정그것은 말할 수 있습니다

수출 유형

기본적으로 내보내기

const List = () => {
    return <div></div>
}

export default List;

가장 일반적으로 사용되는 내보내기 방법이며 파일에 함수가 하나만 있을 때 사용되는 기본 방법이기도 합니다.

기본 방법 기본 이름 사용 방법함수 이름 List는 그대로 사용됩니다.

import List from './List';

가져올 때 이렇게 가져옵니다.

명명된 내보내기

export const List = () => {
    return <div></div>
}

export const Content = () => {
    return <div></div>
}

명명 된 방법은 하나의 파일에 여러 파일을 포함하는 것입니다.

각 기능을 개별적으로 내보내고 싶을 때 사용그것을하는 방법

이는 함수 선언 전에 내보내기를 추가하여 수행됩니다.

import { List, Content } from './List';

가져올 때 지원하다덮어야 한다

명명된 내보내기에서 이름 충돌을 방지하기 위해

// List.js
export const MyComponent = () => {
    return <div></div>
}

// Content.js
export const MyComponent = () => {
    return <div></div>
}

위의 코드와 같이 이름이 같은 함수를 다른 파일로 내보내는 경우가 발생할 수 있습니다.

동일한 파일에서 가져오지 않는 한 중요하지 않지만 매니페스트.js그리고 content.js~의 내 구성 요소호출된 함수를 단일 파일에서 가져온 경우, 이름 충돌이것은 일어날 것이다

// App.js => 이름 충돌 발생 (X)
import { MyComponent } from './List';
import { MyComponent } from './Content';

// App.js
import { MyComponent } from './List';
import { MyComponent as ContentComponent } from './Content';

function App() {
    return <div>
        <MyComponent />
        <ContentComponent />
    </div>
}

위와 같은 이름으로 컴포넌트를 import하면 이름 충돌이 발생하므로 다른 이름으로 변경해야 합니다.

파일로 직접 이동하여 함수 이름을 바꿀 수 있지만 가져올 때 ~처럼또한 사용할 수 있습니다.

기본 및 명명된 메서드를 함께 사용할 수도 있습니다.

const List = () => {
    return <div></div>
}

export const Content = () => {
    return <div></div>
}

export default List;

파일에 내보내기 방법을 하나만 지정할 필요가 없습니다.

전체 파일을 내보내려는 경우 특정 기능만 개별적으로 내보내는 것이 좋습니다.

이 경우, 기본 방법과 명명 된 방법을 조합하여 사용할 수 있습니다.

import List, { Content } from './List';

가져올 때 각 방법에 따라 중괄호는 이름 지정에만 사용됩니다.

재정의할 수 있습니다.

1. 기본 방식은 전체 파일내보낼 때 사용합니다.

기본 “function_name” 내보내기;
2. 작명방법 파일의 여러 기능, 각각 별도의 내보낼 때 사용합니다.

함수 선언 앞에 내보내기를 넣습니다.


3. 네이밍 방법에서 이름 충돌을 방지하기 위해 가져오기에서 ~처럼 쓸 수 있는.

Related Posts: