[리액트(React) 스터디]리액트 컴포넌트

React설치를 완료하고, 이제 React 컴포넌트를 만들어보자.

리액트 컴포넌트 만들기

'src'디렉토리에 'Hello.js'라는 파일을 만들어보자.

Hello.js

// 리액트 컴포넌트를 만들겠다!
import React from 'react';

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

// 'Hello'라는 컴포넌트를 내보내겠다는 의미. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용 할 수 있디.
export default Hello;

파이썬 문법이랑 매우 비슷하다. import.. from ...
갑자기 '마이레시피'프로젝트가 떠오르네..

App.js

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

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

export default App;

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

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

export default App;

컴포넌트는 일종의 UI 조각이기때문에 쉽게 재사용 할 수도 있음을 보여준다!

study by. 벨로퍼트와 함께하는 모던 리액트