React 컴포넌트(Component) 만드는 방법 -> JSX 방식

컴포넌트 만드는 과정

우선 왼쪽부분에 html코드가 완성된 코드라고 봅니다. 그리고 header태그 영역을 컴포넌트로 만들고자 합니다.

그럼 클래스를 선언해야하는데, 클래스의 이름을 Subject라고 하고 Component를 상속받게합니다.

그리고 밑에 render()은 함수인데, function render()라고 선언하지않아도 같은 기능을 하게 업데이트 되었습니다. return안에 header태그를 넣어줍니다.

그럼 header태그는 컴포넌트로 만들어 진것인데, 이것을 사용하려면 Subject태그를 내가 원하는 위치에 사용하면 되는것입니다.

 

 

브라우저에서 어떻게 보이는지 볼까요?

실행된 화면

보면 header태그는 App클래스 div태그 안에 들어있는것을 보실 수 있습니다.

 

 

신기한것은 웹브라우저는 react의 존재를 모릅니다. 왜냐하면 react가 알아서 이러한 반환작업을 끝낸후에 브라우저에 뿌려주기 때문이죠.

이것을 JSX방식이라고 합니다. Javascript로 알아서 변경이 되는 페이스북에서 개발한 언어입니다.

 

 

 

나머지도 만들어 보겠습니다.

TOC는 Table of Contents의 뜻으로 목차를 만들때 많이 이용되는 단어입니다.