[React] 리액트 컴포넌트 정의, 만들기

정의

컴포넌트 : 기능을 단위별로 캡슐화 하는 리액트의 기본 단위 

- 사용자가 보는 뷰(View)는 컴포넌트의 조합으로 구성된다. 

- 자바스크립트 함수 or 클래스

 

컴포넌트 만드는 방법

1) react application 폴더를 연다.

2) src 안에 컴포넌트 이름을 정하고 js파일을 생성한다.

import React from 'react';   //함수로 작성하기 > JSX function Hello(){     return <div>안녕하세요</div>; }   export default Hello;

export default Test; 는 Test 컴퍼넌트를 만들어서 내보내겠다는 의미이다.

 

 

3) App.js로 돌아와 파일을 수정한다.

import React from 'react'; import Hello from './Hello';   function App() {   return (     <div >       <Hello />     </div>   ); }   export default App;

 

4) 터미널에 npm start 입력 후 결과 확인