component

리액트 강의를 수강하기에 앞서

https://learnjs.vlpt.us/ 사이트에서 자바스크립트 기초를 복습하였다.

 

https://react.vlpt.us/basic/ 그리고 앞으로 듣게될 강좌의 텍스트는 이거다

 

 

 

자 그러면 create-react-app을 이용해 우리의 첫 리액트 프로젝트를 시작해보자. 

그리고 Hello.js라는 파일을 생성해 보자.

 

Hello.js의 코드는 다음과 같다.

 

import React from 'react';
function Hello() {
return <div> 안녕하세요 </div>
}
export default Hello;

 

리액트 컴포넌트를 만들때에는 두가지 규칙이 있다.

1. 상단에 import React from 'react'; 를 통해 리액트를 import 해주어야한다는 것이고

2. 하단에 export default Hello; 처럼 내보낼 컴포넌트를 export해주어야한다는 것이다.

 

그렇다면 이렇게 작성한 컴포넌트를 이용하려면 어떻게 해야할까?

App.js에서 우리가 작성한 Hello.js를 이용해보자.

 

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

 

App.js에서도 마찬가지로 리액트를 임포트해주고 App을 export해준다.

우리는 첫번째 리액트 프로그램에서 첫번쨰 컴포넌트를 작성하고 이용해 본 것이다.

 

 

그렇다면 컴포넌트는 왜 쓰는지 알아보자.

컴포넌트는  일종의 UI 조각이다. 따라서 코드의 재사용성을 매우 높여준다.

 

위의 프로젝트에서 우리가 만약 안녕하세요를 세번 화면에 출려하고자 한다면,

우리는 안녕하세요를 세번 입력하는 대신 Hello 컴포넌트가 세번 화면에 출력되도록 하면 될 것이다.

 

우리가 이렇게 작성한 코드들은

public/index.html 경로의 id가 root인 div에 렌더링 되게 된다.