[week1] 컴포넌트 딥다이브 🌊

안녕하세요! 웹 파트 YB 김다현입니다. 1주차 아티클에서는 공식 문서 UI 표현하기의 컴포넌트 파트에 대해 작성해보려 합니다.

기본 개념을 확실히 해야 한다고 생각해서 컴포넌트 관련 공식 문서를 한줄한줄 뜯어보려고 해요,,,

 

🧩 컴포넌트 

리액트의 주 특징이 컴포넌트 기반의 구조라는 점이기 때문에 가장 중요하다고 생각하는 파트다. 컴포넌트란 React를 이루는 독립된 UI 조각인데 이를 통해  재사용성, 유지보수성 이 두 가지 SW 특성을 유지할 수 있다.

 

React 컴포넌트는 마크업을 얹을 수 있는 JavaScript 함수입니다.

 

React 컴포넌트는 그냥 UI를 보여주는 게 아니라, JavaScript 함수로 만들어진다. 여기서 JavaScript 함수가 UI를 만들어주는 역할을 한다고 생각하면 된다. 이 JavaScript 함수는 HTML 같은 마크업을 반환하게 되는데 이를 설명하고 있는 것이다. 리액트에서는 JSX라는 특별한 문법을 이용해 JavaScript 코드 안에서 HTML처럼 보이는 코드를 작성할 수 있다. 컴포넌트가 바로 이런 JSX 코드를 반환하는 JavaScript 함수인 것!

 

See the Pen Untitled by 다현 (@dhgavlke-the-lessful) on CodePen.

컴포넌트는 어떻게 불러올까?

컴포넌트를 별도의 파일로 만들어 export하고 다른 파일에서 해당 컴포넌트를 import할 수 있다. 물론, 위의 코드처럼 컴포넌트들을 root 컴포넌트 파일 (App.js)에 위치하게 할 수 있지만 이렇게 다른 파일로 옮겨 사용하면 재사용성이 높아져 컴포넌트를 모듈로 사용할 수 있다.

 

1. ProfileCard.js (컴포넌트를 정의하고 export)

// ProfileCard.js
import React from 'react';

function ProfileCard({ name, role }) {
  return (
    <div style={{
      border: '1px solid #ccc', 
      padding: '10px', 
      margin: '10px', 
      borderRadius: '5px'
    }}>
      <h2>{name}</h2>
      <p>역할: {role}</p>
    </div>
  );
}

export default ProfileCard;

 

2. App.js (ProfileCard 컴포넌트를 import하고 사용)

 

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import ProfileCard from './ProfileCard';  // ProfileCard 컴포넌트를 import 하기

function App() {
  return (
      <ProfileCard name="김다현" role="YB" />
      <ProfileCard name="김다현" role="YB" />
      <ProfileCard name="김다현" role="YB" />
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

 

왜 컴포넌트를 불러올 때 파일 확장자를 포함하지 않아도 될까?

React에서 컴포넌트를 import할 때 파일 확장자(.js, .jsx 등)를 생략하는 것이 가능하다. 아래 두 가지 방법 모두 동일하게 동작한다.

import Gallery from './ProfileCard';
import Gallery from './ProfileCard.js';

 

이는 React에서 파일을 가져올 때 Webpack이나 Babel이라는 도구들이 자동으로 확장자를 찾아서 연결해주기 때문에 가능한 것이다. 하지만 확장자를 명시적으로 적는 것이 더 명확하고, native ES Modules 방식과도 더 가깝다고 할 수 있다고 공식 문서에 적혀 있다!

 

근데 여기서 native ES Modules 방식과 가깝다는 게 무슨 의미인지 궁금해서 더 찾아봤다.

 

ES Modules이 무엇일까?

ES Module은 JavaScript의 표준 모듈 시스템이다. 즉, 브라우저에서 모듈(다른 파일)을 가져오는 표준적인 방식이다.

 

native ES Modules는 이런 모듈을 브라우저에서 직접 가져오는 방식을 말한다. 브라우저가 ES Modules 방식으로 파일을 가져올 때는 파일 확장자를 꼭 명시해야 한다. 예를 들어 js 확장자를 명시적으로 적어줘야 브라우저가 파일을 제대로 찾을 수 있다.

 

import { something } from './module.js';  // 확장자를 꼭 적어야 함

import { something } from './module';  // 이렇게 하면 오류남

 

한 마디로 정리하자면, React에서 확장자를 생략하는 방식은 Webpack이나 Babel 같은 도구들이 지원해주는 기능이지만 native ES Modules에서는 확장자를 반드시 포함하는 게 표준이라는 것! 그래서 확장자를 명시하는 방식이 브라우저의 표준 모듈 시스템과 더 가깝다는 의미였다.

 

Default Export vs Named Export

 

JavaScript에는 export 하는 방법에는 2가지가 있다. 그게 바로 default와 Named export이다. 이 두 방법을 어떻게 사용하는지 그리고 각각의 차이점을 이해하는 것이 중요하다!

 

Default Export는 파일에서 하나의 값(또는 컴포넌트)만 export할 때 사용한다. 한 파일에 하나의 default export만 존재할 수 있다.

Named Export는 파일에서 여러 개의 값을 export할 수 있다. 이를 통해 여러 값이나 컴포넌트를 한 파일에서 동시에 내보낼 수 있다.

 

그리고 문법도 서로 다르다. 즉, 값을 내보낼 때(export)와 다른 파일에서 값을 가져올 때(import) 사용하는 구문이 다르다.

Syntax	Export 구문	Import 구문
Default	export default function ProfileCard() {}	import ProfileCard from './ProfileCard.js';
Named	export function ProfileCard() {}	import { ProfileCard } from './ProfileCard.js';

 

Default Export

값을 내보낼 때 export default

값을 가져올 때 import 뒤에 그냥 이름을 적으면 된다. 중괄호 {}는 필요 없음.

// Default Export
export default function ProfileCard() {}
import ProfileCard from './ProfileCard';

// ProfileCard.js
export default function ProfileCard() {
  return (
    <div>
      <h2>김다현</h2>
      <p>역할: YB</p>
    </div>
  );
}

// 다른 파일에서 import
import ProfileCard from './ProfileCard.js';  // 컴포넌트 이름 그대로 가져올 수 있음

 

Default Export에서는 컴포넌트 이름을 자유롭게 변경할 수 있다.

import StudyMember from './ProfileCard.js';  // 이름을 StudyMember로 바꿔도 같은 컴포넌트를 가져옴

 

Named Export

값을 내보낼 때 export만 사용 (기본적으로 함수나 변수를 여러 개 내보낼 수 있음)

값을 가져올 때 가져오려는 값을 중괄호 {} 안에 명시해야 한다. 가져오는 이름이 정확하게 일치해야 함!

// Named Export
export function ProfileCard() {}
import { ProfileCard } from './ProfileCard';

 

// ProfileCard.js
export function ProfileCard() {
  return (
    <div>
      <h2>김다현</h2>
      <p>역할: YB</p>
    </div>
  );
}

export function MemberList() {
  return (
    <div>
      <h2>나리스 스터디원</h2>
      <ul>
        <li>김다현 (YB)</li>
        <li>김건휘 (OB)</li>
      </ul>
    </div>
  );
}

// 다른 파일에서 import
import { ProfileCard, MemberList } from './ProfileCard.js';  // 중괄호로 여러 값을 가져옴

 

다시 한 번 말하자면, Named Export에서는 컴포넌트의 이름을 그대로 사용해야 한다. 이름이 맞지 않으면 에러가 발생함!

 

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

React에서는 한 파일에 여러 컴포넌트를 만들 수 있지만, default export는 하나만 사용할 수 있다. 만약 여러 개의 컴포넌트를 내보내고 싶다면 named export를 사용해야 한다. 이 방법은 특히 한 파일에서 여러 컴포넌트를 함께 관리할 때 유용하다.

 

Named Export를 사용해 여러 컴포넌트 내보내기

예를 들자면, Gallery.js 파일에 두 개 이상의 컴포넌트가 있다고 가정해보자. 그러면 default export와 named export를 혼합해서 사용할 수 있다. Gallery 컴포넌트는 default로 내보내고, Profile 컴포넌트는 named export로 내보낼 수 있다는 뜻이다.

 

// Gallery.js
export function Profile() {
  return <img src="https://example.com/profile.jpg" alt="Profile" />;
}

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

 

여기서는 Profile은 named export로, Gallery는 default export로 내보내고 있다.

 

Named Import와 Default Import로 컴포넌트 가져오기

App.js에서 Gallery와 Profile 두 컴포넌트를 가져와서 사용할 수 있다. named export로 내보낸 Profile은 중괄호 {}를 사용해 import해야 하고, default export로 내보낸 Gallery는 중괄호 없이 import할 수 있다.

// App.js
import Gallery from './Gallery.js';  // default import
import { Profile } from './Gallery.js';  // named import

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

 

여기서 Gallery는 default로 가져오기 때문에 이름을 마음대로 바꿀 수 있지만, Profile은 named exoprt로 가져왔기 때문에 중괄호를 사용하고 이름을 변경하지 않아야 한다.

 

❓궁금한 점

한 프로젝트에서 default export만을 사용하는 것이 더 나은지 아니면 named export를 혼합해서 사용하는 것이 더 좋을지 궁금해졌다...