리엑트는 사용자 정의 태그를 만드는 언어다.
사용자 정의 태그를 리엑트에서는 컴포넌트 라고 부른다.
리엑트를 사용하는 것은 결국 컴포넌트를 만들고 사용할 줄 알아야 하는 것이다.
그럼 컴포넌트를 만들고 활용해 보자.
App.js 의 내용을 위와같이 수정해보았다.
4~8라인의 funciotn Header 부분이 사용자 정의 테그를 정의한 것이다.
사용자 정의 테그를 만들때에는 함수 명칭의 첫 글자를 무조건 대문자로 해야 한다.
13라인의 <Header></Header> 부분이 위에서 정의한 Header 컴포넌트를 적용한 부분이다.
컴포넌트 명칭을 HTML 태그처럼 적어주기만 하면 바로 화면에 적용되는걸 볼 수 있다.
그러면 사용자 정의 태그를 좀 더 만들어보자.
위에서는 Header 부분을 만들었으므로 아래에서는 nav와 article 부분을 컴포넌트로 만들어보자.
만들고 나면 위의 이미지와 같다.
주의사항대로 컴포넌트를 정의할 때 명칭을 대문자로 하였고,(10, 20라인)
해당 명칭을 HTML 태그처럼 기입해주었다. (31, 32라인)
이렇게 적용하면 컴포넌트를 만들기 전이나
컴포넌트를 만든 후나 결과 화면은 똑같다.
하지만 컴포넌트로 구성했기 때문에
- 해당 컴포넌트만 따로 공유하기 쉽고
- 컴포넌트의 정의 부분만 수정하면 컴포넌트를 적용한 부분은 일괄 수정이 된다는 장점이 있다.
이것이 리엑트의 본질! 컴포넌트다.