[리액트] 컴포넌트 선언하기, 모듈 내보내기, 불러오기

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

3장 컴포넌트

• 3.2 첫 컴포넌트 생성

 

---

 

컴포넌트 선언하기

리액트에서는 클래스형 컴포넌트와 함수형 컴포넌트로 총두가지 컴포넌트가 있다. 두 컴포넌트에 대해 더 자세히 알아보고 싶다면 👉  [리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?)

 

컴포넌트를 생성할때는 일반적으로 components라는 폴더안에 넣는다. src폴더 안에 components 폴더를 만든 후 FirstComponent.jsx라는 파일을 만들어보자. 컴포넌트 파일은 .js와 .jsx 둘다 가능하다. 나는 순수한 자바스크립트 파일과 JSX문법을 사용해 만든 컴포넌트파일을 구분하기 위해 파일확장자를 .jsx로 지정했다.

 

React Code Convention

• 파일: camelCase
• 폴더: small case

 

 

함수형 컴포넌트로 첫 컴포넌트 만들기

// FirstComponent.jsx
import React from 'react';

const FirstComponent = () => {
  return (
    <div>
      <p>This is First Component</p>
    </div>
  );
};

export default FirstComponent;

 

리액트 패키지에서 리액트  객체 불러오기

import React from “react”;

 

모듈 내보내기

모듈을 내보낼때는 export라는 키워드로 해당 컴포넌트를 내보낸다.

export default FirstComponent;

 

모듈 불러오기

모듈을 불러올때는 import라는 키워드로 불러오고 싶은 컴포넌트를 불러온다.

// app.jsx
import FirstComponent from './components/FirstComponent';

 

export default <컴포넌트 이름> 더 간단하게 쓰기

component.js

export default <컴포넌트 이름>에서 default를 생략하고 컴포넌트 이름에 중괄호를 넣어주었다

import React from 'react';

function Component() {
  ...
}

export { Component };

App.js

export default <컴포넌트 이름>에서 default를 생략하고 컴포넌트 이름에 중괄호를 넣어주었다

import React from 'react';
import { Component } from './Component';

function App() {
  ...
}

export default App;