컴포넌트 만드는 방법

first-react 파일을 VS Code에서 열어주고 

src 디렉토리에 Hello.js 라는 파일을 생성해 준 후 아래와 같이 작성해준다.

 

Hello.js

// 리액트 컴포넌트를 만들 때는 아래의 코드를 통해서 리액트를 불러와야한다.
import React from 'react';

function Hello() {
   return <div>안녕</div>
}

// Hello라는 컴포넌트를 내보내겠다는 의미이다.
// 이와 같은 방식은 다른 컴포넌트에서 불러와 사용할 수 있다.
export default Hello;

 

 

그 다음 App.js에 다음과 같이 작성해준다.

 

App.js

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

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

export default App;

이렇게 나오면 성공!