나의 첫 리액트 컴포넌트

오늘은 어떻게 리액트로 컴포넌트를 만드는 지에 대해서 알아보도록 하자.

우선, 리액트 파일에서 yarn start로 리액트를 실행시키고 src 폴더 아래에 Hello.js 파일을 생성한다. Hello.js가 바로 컴포넌트를 작성할 파일이 된다.

여기서 yarn을 사용하는 이유는, yarn은 npm과 거의 비슷하게 사용되지만 npm보다 yarn이 훨씬 빠르다고 한다. yarn을 한번도 사용해보지 않았다면 한 번쯤 사용해보는 것이 좋다.

Hello.js파일로 들어가보자.

// 리액트 컴포넌트를 만들 땐 항상 react를 import 해와야 한다.
import React from 'react';

리액트 컴포넌트를 만드는 방법은 두 가지가 있다. 함수 형태로 만드는 방법과 클래스로 만드는 방법이 있다. 우선 오늘은 함수 형태로 만드는 방법을 공부해보도록 하자.

// 컴포넌트 이름은 대문자로 시작해야 하고 파스칼 케이스를 따른다.
function Hello() {
  return <div>안녕하세요</div>
}

이렇게 하면 Hello 라는 컴포넌트를 완성했다. 컴포넌트는 XML 형태의 값을 리턴해야 한다. 여기 html 처럼 생긴

는 html이 아니라 JSX라고 부른다.

마지막으로 hello 컴포넌트를 내보내야 한다.

export default Hello;

이렇게 내보낸 컴포넌트는 app.js에서 사용할 수 있다.

완성된 작은 컴포넌트 :

import React from 'react';

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

export default Hello;