리액트 컴포넌트(react component)

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

*모든 실습은 codesandbox에서 하고있다.

 

지난 포스팅에 리액트의 장점은 커다란 웹사이트를 작은 컴포넌트 단위로 나누어 개발할 수 있는 것이라 하였다. 오늘은 그 컴포넌트에 대해 알아볼 것이다.

 

import React from "react";
import ReactDOM from "react-dom";

//이름 첫글자는 대문자
function Heading() { 
  return <h1>My Favourite Foods</h1>;
}

ReactDOM.render(
  <div>
    <Heading />
  </div>,
  document.getElementById("root")
);

가장 간단한 heading을 만들어서 그 사용법을 알아보겠다. 먼저 heading을 리턴하는 함수 Heading()을 만들어준다. 그리고 그것을 render 부분에 <Heading />라 적어주면 페이지에 나타나게 된다.

 

이러한 component 사용방법은 airbnb의 react 가이드에 나와있다.

 

 

src 폴더 아래에 Heading.jsx라는 파일을 만들어준다. 우리는 모든 컴포넌트들을 개별의 jsx 파일로 저장해놓을 것이다. 위 코드의 heading 부분을 Heading.jsx 파일에 잘라 넣어준다. 

 

import React from "react";

function Heading() { 
  return <h1>My Favourite Foods</h1>;
}

우리가 jsx 파일에서 h1 태그를 사용할 수 있는 이유는 react가 이것을 javascript 코드로 바꾸어주기 때문이다. 따라서 react를 import 해주어야 한다. 

 

import React from "react";

function Heading() {
  return <h1>My Favourite Foods</h1>;
}

export default Heading;

 

그 후, export 해주어 index.js 파일에서 읽을 수 있게 해주어야 한다. 

*export default 는 모듈을 이름없이 export 한다는 뜻이다.

 

import Heading from "./Heading";

export를 해주었으니 import 를 해줄 차례이다. index.js 파일에 위 코드를 추가해준다. 

 

이제 heading이 문제 없이 출력된다.

 

list도 같은 방법으로 출력시켜보겠다.

import React from "react";
function List() {
  return (
    <ul>
      <li>Bacon</li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  );
}

export default List;

List.jsx라는 파일을 만들고 위 코드를 적어준다. 이후 아래와 같이 index.js를 적어준다. 

import React from "react";
import ReactDOM from "react-dom";
import Heading from "./Heading";
import List from "./List";

ReactDOM.render(
  <div>
    <Heading />
    <List />
  </div>,
  document.getElementById("root")
);

 

 

이를 아래와 같이 더 간단하게 만들기 위해서 App.jsx라는 파일을 만들어준다.

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

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

그리고 그 안은 아래와 같이 적어준다.

 

import React from "react";
import Heading from "./Heading";
import List from "./List";

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

export default App;

 

component 파일들은 components라는 폴더를 만들어서 모아서 관리하는 것이 보기 편할 것이다. 이때 import 할 경로를 잘 설정하는 것을 잊지 말아야 한다.