[React] 컴포넌트란 ?

1. 컴포넌트란 ? 

• 일종의 UI 조각
• 리액트로 만든 페이지는 여러 컴포넌트들로 구성 => 페이지 단위로 HTML을 작성하지 않고, 각 부분을 컴포넌트로 만들어서 조립해 사용 ( 코드 재사용이 쉽다 !! )

Hello.js

import React from 'react';

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

export default Hello; // Hello 라는 컴포넌트를 내보내겠다는 의미

 

App.js

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

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

export default App;

위는 App.js에서 Hello 컴포넌트를 불러와 사용한 예시이다 .

컴포넌트를 사용할 때는 <컴포넌트명/> 처럼 사용한다 ! 

 

** 여기서 주의 할 점

jsx는 하나의 태그만 만들 수 있다는 점을 유의하여 하나의 태그로 감싸주어야 한다. (위 예시에선 div태그 사용) ==> 리액트의 Fragment <></>를 사용 가능 !!

 

 

 

---

 

reference

코딩앙마의 리액트 기초 강좌

벨로퍼트의 모던 리액트