[React] 리액트 컴포넌트 만들기

🍨 이번 시간에는 첫 리액트 컴포넌트를 만들어보겠습니다.

src 폴더에 hello.js라는 파일을 만든다.

import React from "react";

그리고 리액트를 사용하려면 항상 파일 위에 위와 같은 코드를 써주어야 한다. 이는 리액트를 불러와서 사용하겠다는 의미가 된다.

 

🍨 컴포넌트 만들어보기

컴포넌트를 만드는 방법에는 2가지가 있다.

1) 함수 형태로 컴포넌트 만들기 2) 클래스 형태로 컴포넌트 만들기

클래스 형태로 컴포넌트 만드는 것은 나중에 해보고, 일단은 함수 형태로 컴포넌트를 만들어보겠다.

 

import React from "react";

function Hello(){

    return <div>안녕하세요</div>;

}

export default Hello;

• 컴포넌트의 이름은 대문자로 시작하며, 단어가 여러 개라면 단어의 구분을 대문자로 시작하여 카멜 케이스 형태로 작성하면 된다.
• 컴포넌트에서는 XML 형태의 값을 return해주어야 한다. 세미콜론은 넣어도 되고 안넣어도 된다.

→ 마치 HTML 형태 같지만 이를 HTML이라 부르진 않고 JSX 형태라고 부른다.

• 마지막으로 함수를 export 해준다. (export default Hello의 의미 : Hello라는 컴포넌트를 만들어서 내보내주겠다는 것을 의미한다)

 

import React from "react";

import Hello from "./Hello";

function App() {

  return (

    <div>

      <Hello />

    </div>

  );

}

export default App;

App.js에서 Hello를 import해온 다음, App 컴포넌트 안에서, <Hello />와 같은 형태로 사용한다.

 

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';



ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

• index.js에는 다음과 같이 App을 import하여 App 컴포넌트를 사용하고 있기 때문에 App 컴포넌트 안에 넣은 Hello 컴포넌트에 작성한 '안녕하세요'가 보이게 된다.
• ReactDOM은 id가 'root'인 객체를 찾아서 그 안에 <App />을 넣겠다는 의미가 된다.

 

컴포넌트는 일종의 UI 조각이고 얼마든지 재사용할 수 있다.