React Component 만들기

feelslikemmmm·2020년 7월 18일
0

React

목록 보기
6/10
post-thumbnail

Component 만들기

        <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 이름에만 집중하게 함으로써 복잡도를 획기적으로 낮추고

더 많은 복잡도에 도전할 수 있는 여지가 생기게 된 것이다.

profile
꾸준함을 잃지 말자는 모토를 가지고 개발하고 있습니다 :)

0개의 댓글