[생활코딩] React 강의 03. 컴포넌트 만들기

리액트의 본질

리액트는 사용자 정의 태그를 만드는 기술


아래와 같이 app.js를 변경해 보았다.

여기서 만약 <header>태그의 내용이 엄청나게 길어진다고 상상해보자. 
그러면 소스를 보기에 매우 불편해지 때문에 <header> 태그를 사용자 정의하여 간단하게 줄여보도록 해보자.
사용자 정의 태그를 만들 때는 함수를 정의하면 된다.

React 에서는 사용자 정의 태그를 생성할 때 무조건 대문자로 시작해야 함.
(ex. function header  ==> x  // function Header == O)
React에서는 사용자 정의 태그를 컴포넌트 (component)라고 부른다.

이제 밑에 <nav>, <article> 태그도 한 번 컴포넌트로 만들어 보자.

이런식으로 정리 할 수 있다.