[React] 사용자 정의 Component 만들기

 

Component

💡 재사용이 가능한 각각의 독립된 모듈. 웹 컴포넌트는 W3C에서 새로 정의가 되었으며 보통 Header, Footer등 각 영역을 담당하기도 한다.

대표적으로 Header, Nav, Aside, Footer 등이 있다.

사용방법은 첫글자는 반드시 대문자로 시작되며, 해당 영역만 재사용을 목적이다.

 

 

import logo from './logo.svg';
import './App.css';



function App() {
  return (
    <div className="App">
      <Modal />
    </div>
  );
}

function Modal() {
  return <div>
    test 입니다.
  </div>
}

export default App;

여기서 우리가 확인해야 할 것은 Modal이라는 함수 사용이다.

 

사용자 Component를 만드는 방법은 매우 단순하다.

function을 통해 만들고자 하는 Component명을 입력하면 된다.

 

function 컴포넌트명

 

그리고 이를 불러오는 방법은 HTML의 TAG를 입력해서 불러올 수 있다.

 

<Modal></Modal> 이 것을 하나로 줄인다면 <Modal />이 된다.

 

나누는 이유는 영역의 재사용과 코드가 길어짐에 따라서 가독성이 불편한 것을 보완하기 위해서다.

Body에 'test 입니다'가 나온다면 정상적으로 Component가 입력 된 것을 확인할 수 있다.