React | 리액트로 컴포넌트 만들기

컴포넌트란 "재사용이 가능한 각각의 독립된 모듈"입니다.

컴포넌트를 만들어 사용하면 길고 복잡한 코드를 기능에 따라 나누어 볼 수 있고,

'목록'과 같이 반복되는 요소가 있을 때 하나의 컴포넌트로 데이터만 바꿔가며 사용할 수 있기에 편리합니다.

오늘은 자바스크립트 라이브러리 React를 통해 컴포넌트를 만들어보겠습니다! 

 

---

1. React App 생성

아래 글 참고

React | 리액트 설치 및 Visual Studio Code로 실행 방법

2. 컴포넌트 만들기

 

저는 먼저 컴포넌트가 많아질 것을 대비해 src/components/ReactComponent 폴더를 만들어 index.js 파일을 추가해주었습니다.

src/ReactComponent.js 로 src 폴더 안에 바로 js 파일을 만들어주어도 무방합니다.

 

 

src/components/ReactComponent/index.js

function ReactComponent() {
    return (
    <div>
        아기펭귄의 컴포넌트
    </div>
    )
};

export default ReactComponent;

함수를 만들어 return 값에 원하는 내용을 작성하고,

export default를 통해 컴포넌트를 내보냅니다.

 

혹은 export default를 function 앞에 작성하여 바로 내보낼 수도 있습니다.

export default function ReactComponent() {
    return (
    <div>
        아기펭귄의 컴포넌트
    </div>
    )
};

 

3. App.js 파일에 해당 컴포넌트 불러오기

 

src/App.js

import './App.css';
import ReactComponent from './components/ReactComponent';

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

export default App;

 

코드 실행 결과