React 시작하기 - component 만들기

이런 html 태그가 있다고 했을떄에 header 태그안에 있는 것이 1억개의 태그로 이루어져있다면

 

그 태그들은 어딘가에 감쳐두고

 

하나의 태그로 그것을 의미할 수 있다면 얼마나 좋을까? 그걸 해결하는 것이 컴포넌트이고 그 컴포넌트들을 사용할 수 있게 하는 것이 리액트의 기능이다.

 

위쪽에 class인 Subject를 만드는데 리액트의 클래스 Component를 상속 받고

 

꼭 render() 함수안에 return 값으로 넣고 싶은 html 코드를 만들어준다.

 

아래에 App 클래스에 div박스 안으로 Subject 태그를 넣어주면 끝

 

여기서 거의 유사 javaScript언어 같아 보이지만

 

실제로 클래스 Subject는 javaScript으로만 돌릴때는 문법상 틀려 오류를 일으키는데  리액트에서 사용할 수 있는 이유는

 

이러한 코드를 페이스북에서 만든 jsx 코드라하는데 

 

그래서 jsx로 코드를 작성하면 create-react-app이 javaScript로 컨버팅 해준다고 생각하면 된다.