[React] 리액트 컴포넌트(component) 만들기 - 함수형 컴포넌트

함수형 컴포넌트 생성하기

함수형 컴포넌트를 생성하기 위해 먼저 src 폴더 안에 Main.js라는 js파일을 만들어줍니다.

< Main.js >

import React from 'react';

    function Main() {
      return <div>메인 페이지 입니다.</div>
    }

export default Main;

리액트 컴포넌트를 만들 때는 먼저 import를 하여 리액트를 불러와야 합니다. 그리고 코드 최하단에 Main이라는 컴포넌트를 내보내주겠나는 export를 해줍니다. 여기서 생각해볼 수 있는 것은 import가 있다면 export도 있어야한다는 것.

함수형 컴포넌트를 만들었다면 이제 App.js 파일로 이동해줍니다.

< App.js >

import React from 'react';
import Main from './Main';

function App() {
  return (
    <div>
      <Main />
    </div>
  );
}

export default App;

App.js에서 해줘야할 것은 우리가 만든 Main 컴포넌트를 불러오기 위해 import 해주는 과정이 필요합니다. Main.js 파일을 임포트 한 후 함수 App()가 리턴하는 Html 구조 원하는 곳에 <Main />를 삽입해주면 Main.js 에서 만든 컴포넌트가 화면에 불러와집니다.

리액트는 레고 조각을 끼워맞추는 것과도 같기 때문에 컴포넌트는 일종의 레고 조각이라고 생각하시면 되는데 그렇기 때문에 어떤 곳에서도 쉽게 재사용할 수 있게 됩니다.

import React from 'react';
import Main from './Main';


function App() {
  return (
    <div>
      <Main />
      <Main />
      <Main />
      <Main />
    </div>
  );
}

export default App;

여러개의 서로 다른 컴포넌트를 불러올 때도 동일한 방법을 적용하시면 되는데요. 만약 여기에 Detail이라는 새로운 컴포넌트 조각을 생성하고 싶다면 똑같이 src폴더 안에 Detail.js라는 파일을 만들고 App.js에서 임포트 해주시면 됩니다.

import React from 'react';
import Main from './Main';
import Detail from './Detail';


function App() {
  return (
    <div>
      <Main />
      <Detail />
    </div>
  );
}

export default App;

이처럼 여러 컴포넌트를 만들어 하나의 App.js 파일 안에서 조각을 이어붙일 수 있게 되는데 함수형 컴포넌트를 만드실 때와 함수의 첫 문자는 대문자로 해주는 것 잊지 말기! 리액트에서는 카멜케이스 표기법을 사용한다!