[React] 컴포넌트 알아보기

컴포넌트

컴포넌트는 독립적으로 사용가능한 모듈인데요 컴포넌트 하나를 구현하여 어디서든 독립적으로 사용할 수 있게 할 수 있어야합니다.

컴포넌트를 만들 땐 몇가지 필수적으로 넣어주어야 하는 것이 있습니다.

리액트 사용하기

import React from "react";

react를 가져와서 사용하겠다는 것을 의미합니다.

클래스 컴포넌트

import React, { Component } from "react";

class Hello extends Component {
  render() {
    return (
      <div>
        안녕하세요
      </div>
    );
  }
}

Component를 가져와서 상속받아 사용해야합니다.
최근에는 Hooks + 함수형 컴포넌트로 인해 많이 사용되고 있는 패턴은 아닙니다.

함수 컴포넌트

import React from "react";

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

export default Hello;

자바스크립트에서 함수를 만들듯 동일하게 만들어 JSX를 리턴해줍니다.

JSX는 추후 다른 부분에서 학습하겠습니다.

컴포넌트 내보내기

만든 컴포넌트를 다른곳에서 사용하기 위해서는 내보내야합니다.

export default Hello;

컴포넌트 불러오기

내보낸 컴포넌트를 불러와서 사용합니다.

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

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

export default App;

상태 경로를 작성하여 Hello 파일을 가져옵니다.
사용은 태그와 비슷하며 가져온 이름으로 사용할 수 있습니다. 여기서 .js는 생략이 가능합니다.