[ReactJS] ReactJS로 영화 웹 서비스 만들기 (4) - React 컴포넌트 생성

※ React를 계속 진행하고 싶다면 npm start를 실행하고 console을 종료하지 않아야 한다.

 

react는 component와 함께 동작한다. 모든 것은 component임. 당신은 component를 만들게 될 것이고, component를 보기 좋게 만들게 될 것이고 component가 data를 보여주게 할 것이다.

 

component 가 뭔데?

=> Html을 반환하는 함수이다.

<App> 이 바로 컴포넌트!

위에서는 App() 함수로 Html을 반환하는 것이다.

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

javascript와 Html사이의 이러한 조합을 jsx라고 부른다.

※ jsx는 react에서 나온 매우 custom한 유일한 개념이다. 나머지는 JavaScript를 하는것과 다름없다고 보면 된다.

 

이제 나만의 component를 만들어 볼 차례이다.

src에 Zzz.js를 새로 생성해보자.

- component를 작성할 때 마다 import React from 'react'를 써줘야만 한다. (없으면 react는 여기에 jsx가 있는 component를 사용하는것을 이해하지 못함)

이제 index에서 Zzz를 써볼까?

응 안돼~

react application이 하나의 component만을 rendering 해야하기 때문이다. 지금은 App 과 Zzz 2개의 컴포넌트를 렌더링 하려고 하기때문에 안되는거임

?그러면 어떻게 Zzz를 쓰지?

=> App 안에 Zzz를 넣으면 되지~~ App.js에서 여러 컴포넌트를 import해서 사용하면 된다.

 

이제 확인해보자

좋았어!!

 

결론은

react는 Component를 가져와서 Browser가 이해할 수 있는 평범한 일반 HTML로 만들어 준다.

이게 jsx의 절반이다.

jsx는 javascript 안의 HTML이다. Component를 만들고 어떻게 사용하는지에 대한 것이다.