[React] 컴포넌트

컴포넌트 내보내기

export default 접두사는 표준 JS이다. 이는 React에만 해당하지 않는다고 한다.

이 접두사를 사용하면 다른 파일에서 가져올 수 있도록 파일에 주요 기능을 표시할 수 있다.

 

---

함수 정의

function Profile( ) { } 을 사용하면 Profile이라는 이름의 JS 함수를 정의할 수 있다.

React 컴포넌트는 일반 JS 함수이지만, 이름은 대문자로 시작해야한다. 그렇지 않을 경우 작동하지 않는다.

 

---

마크업 추가

아래의 컴포넌트는 src 및 alt 속성을 가진 <img /> 태그를 반환한다.

<img />는 HTML처럼 작성 되었지만 실제로는 JS이다. 이 구문을 JSX라 하며, JS 안에 마크업을 삽입할 수 있다.

반환문은 아래의 컴포넌트처럼 한 줄에 모두 작성할 수 있다.

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

 

 

하지만 마크업이 모두 return 키워드와 같은 라인에 있지 않은 경우에는 아래와 같이 괄호로 묶여야 한다.

만약 괄호가 없다면 return 뒷 라인에 있는 모든 코드가 무시된다.

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

 

---

사용하기

Profile 컴포넌트를 정의했으므로 다른 컴포넌트 안에 중첩할 수 있다.

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

---

컴포넌트 중첩 및 구성

컴포넌트는 일반 JS함수이므로 같은 파일에 여러 컴포넌트를 포함할 수 있다.

이 파일이 복잡해지면 언제든지 Profile 컴포넌트를 별도의 파일로 옮길 수 있다.

Profile 컴포넌트는 Gallery 안에서 렌더링되기 때문에 Gallery는 각 Profile을 자식으로 렌더링하는 부모 컴포넌트라고 말할 수 있다.

컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 사용하는것이 React의 최대 장점이다.

컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 그 정의를 중첩해서는 안된다.

export default function Gallery() {
  // 🔴 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안됨
  function Profile() {
    // ...
  }
  // ...
}

 

---

컴포넌트를 import 또는 export 하는 방법

Gallery, Profile 컴포넌트가 App.jsx라는 root 컴포넌트에 파일에 작성되었다면 또 다른 컴포넌트에서 재사용되기 번거롭게 된다.

재사용성을 위해 다른 파일로 옮기는것이 좋다.

그렇게 옮기게 된다면 재사용성이 높아져 컴포넌트 모듈로 사용할 수 있다.

 

아래 예시를 보면 App.jsx 파일에서 Profile과 Gallery 컴포넌트를 빼서 새로운 Gallery.jsx 파일로 옮겼다.

이제 Gallery 컴포넌트는 Gallery.js에서 import하여 사용할 수 있다.

 

App.jsx

Default 방식으로 Gallery 컴포넌트를 Gallery.jsx로 부터 import 한다.

Root App 컴포넌트를 default 방식으로 export 한다.

import Gallery from './Gallery.jsx';

export default function App() {
  return (
    <Gallery />
  );
}

 

Gallery.jsx

Profile 컴포넌트를 정의하고 해당 파일에서만 사용되기 때문에 외부 파일로 export 되지 않는다.

Default 방식으로 Gallery 컴포넌트를 export하여 외부 파일에서 사용 가능하다.

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

---

한 파일에서 여러 컴포넌트를 import 하거나 export 하기

Gallery 컴포넌트가 아닌 Profile 컴포넌트만 사용하고 싶을 때 Profile 컴포넌트만 export하면 된다.

하지만 Gallery.jsx 파일에는 이미 default export가 존재하기 때문에 두개의 default export는 정의할 수 없다.

이런 경우 새로운 jsx파일을 생성하여 default export를 사용하거나 named export로 Profile 컴포넌트를 export 할 수 있다.

한 파일에서는 단 하나의 default export만 사용할 수 있고, named export는 여러번 사용할 수 있다.

 

아래는 named export 방식을 사용하여 Gallery.jsx 파일에서 Profile 컴포넌트를 export한것이다.

Gallery.jsx

export function Profile() {
  // ...
}

 

아래는 named import 방식을 사용하여 Gallery.jsx 파일에 Profile 컴포넌트를 App.jsx 파일로 import 한 후 App 컴포넌트에서 렌더링 한다.

App.jsx

import { Profile } from './Gallery.js';

export default function App() {
  return <Profile />;
}