리액트 컴포넌트 {React Component}

React.js 공부를 시작하면서 알게된 지식들을 하나하나씩 정리해 보려고 한다

 

오늘은 React Component에 대해 알아보자 

 

Component란?

 

Component는 HTML을 반환하는 함수다.

 

react는 component를 사용해서 HTML처럼 작성하려는 경우에 필요하다.

 

다시 말해 우리는 react에서 component를 통해 data를 주고 받을 수 있으며

 

component를 통해 웹사이트에서 HTML처럼 보이게 할 수 있다라고 정리할 수 있겠다.

 

그리고 이처럼 HTML과 javascript사이의 이런 조합을 JSX라고 한다.

 

그럼 JSX는 뭐지? 

 

나는 처음에 JSX는 마치 RxJava같은 그런 생소한 개념중 하나라고 생각을 했다 (뭐.. 생각해보면 단어 태생이유는 비슷한거 같기도 하고...?)

 

JSX는 위에서 말했듯 HTML과 javascript 사이의 조합을 말하는 것이고 

 

이 JSX는 react에서 나온 custom한 유일한 개념이라고 말할 수 있다.(react에서 소개한 개념)

 

서론이 길었고 본격적으로 component를 작성하는 법을 알아보자 

 

Component 작성법

 

먼저 yarn create-react-app을 통해 만들어진 폴더의 src폴더안에 새로운 file을 하나 생성해주자 

 

항상 파일을 만들어 주고 나면 그 파일에는 React를 import해주어야한다 

 

(import React from 'react';)

 

위와같이 항상 import React from 'react';를 해주는 이유는 

 

React를 import를 해주지 않으면 react는 App.js에서 실행시 jsx가 있는 component를 사용하는것을 이해하지 못한다.

 

이제 만든 컴포넌트를 한번 사용해보려면

 

App.js 안에 만든 파일을 import해주고 다음과 같은 방식으로 집어 넣어주면된다.

 

이제 yarn start 혹은 npm start를 통해 확인을 해보자

 

**주의 

 

react-application은 하나의 component만 rendering 할 수 있는데 그 component는 App이라는 component이다.

 

따라서 App.js에 내가 만든 component들을 집어넣어서 rendering 하도록 해야한다.