[React] 리액트 컴포넌트 생성하기

 

작업환경

$ npm install -g create-react-app
$ create-react-app 프로젝트파일명

해당 포스팅은 VScode에서 create-react-app을 통해 만들어진 React 파일에서 작업한 내용입니다.

 

 

Hello라는 컴포넌트 생성하기

src 디렉터리에 components라는 파일을 생성 후 그 파일 안에 Hello.jsx라는 파일을 생성하여 아래와 같이 작성합니다.

Hello.jsx

import React from "react";

function Hello() {
  return <div>Hello React!</div>;
}
export default Hello;

 

컴포넌트 생성 시 아래와 같이 리액트를 불러와 주어야 합니다.

import React from 'react';

 

그리고 코드 맨 아래쪽에서는 Hello 컴포넌트를 export 하여 다른 컴포넌트에서도 사용이 가능하도록 합니다.

export default Hello;

 

 

App.js에서 컴포넌트 불러오기

이제 Hello 컴포넌트를 App.js에서 불러와서 사용해보겠습니다.

App.js

import "./App.css";
import Hello from "./components/Hello";

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

export default App;

 

리액트의 장점인 컴포넌트 재사용을 통해 아래와 같이 컴포넌트를 반복적으로 표시할 수 도 있습니다.

App.js

import "./App.css";
import Hello from "./components/Hello";

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

export default App;

 

 

+추가적으로 index.js 파일을 열어보시면

Index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
reportWebVitals();

여기에서 ReactDOM.render()의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링 하는 것을 의미합니다. 

 

 

📚 참고

https://react.vlpt.us/basic/03-first-component.html