<header> <h1>WEB</h1> world wide web! </header>
위에 보이는 코드를 Component로 만들어보자
현재 듣고 있는 생활코딩 React 강의에 따라서 함수방식이 아닌 class 방식으로 작성
class Subject extends Component{ render(){ return( <header> <h1>WEB</h1> world wide web! </header> ); } }
이렇게 작성을 해주면 현재 header태그는 Subject라는 Component안에 담기게 된다.
이것이 Component를 생성하는 기본적인 방법이다.
class뒤에 오는 Component 이름은 첫글자가 대문자로 작성되어야 한다.
이렇게 작성한 Component는 아래와 같이 사용 할 수 있다.
> ```
<header>
<h1>WEB</h1>
world wide web!
</header>
위에 보이는 Header태그를
<Subject></Subject>
이렇게 작성하면 끝이다.
지금이야 간단한 2줄짜리 태그지만 이 태그가 1억줄이라고 생각해보자
1억줄 자리 태그를 한줄로 이름만 작성할 수 있다면 가독성이 정말 좋아질것이다.
또한 Component를 분류함에 따라 재사용성 또한 높아진다.
정리정돈을 한다고 생각하면 된다. 물건을 박스별로 분류해서 넣어두고
1번 박스는 생필품 2번박스는 옷 이런식으로 정리정돈을 하는 것이다.
이렇게 되면 Component 이름에만 집중하게 함으로써 복잡도를 획기적으로 낮추고
더 많은 복잡도에 도전할 수 있는 여지가 생기게 된 것이다.