Component란?

Component란

 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데 이를 Component라고 한다.
이걸 이용하면 함수와 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다. 

다음은 모달창을 컴포넌트화 해서 html에 꽂아넣는 예시이다.

function App (){
  return (
    <div>
      <Modal /> // Modal 컴포넌트가 들어갈 곳
    </div>
  )
}

// Modal 컴포넌트의 구조
function Modal(){ 
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

컴포넌트 만드는 법

1. function을 이용해서 함수를 하나 만들어주고 작명한다.
2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담는다.
3. 그럼 원하는 곳에서 <함수명></함수명> 혹은 <함수명 /> 사용하면 아까 축약한 HTML이 등장한다.

이렇게 축약한 HTML 덩어리를 Component라고 부른다.

 

컴포넌트 만들 때 주의점

• component 작명할 땐 보통 영어 대문자 시작하여 작명한다.
• return() 안에 html 태그들이 평행하게 여러게 들어갈 수 없다(∵ 하나의 큰 div 태그 안에 모든 태그들이 들어가야야 하기 때문에)
• function App(){} 내부에 컴포넌트를 만들면 안된다. 왜냐하면 function App(){}도 알고보면 컴포넌트 생성 문법이기 때문에... 보통 컴포넌트 안에 컴포넌트를 만들지 않는다.
• <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다.
• arrow function을 써도 된다.
  • arrow function을 사용하여 만든 컴포넌트 예시 코드

const ArrowExample = () => {
  return (
    <div>
      <GridContainer>
        <GridItem xs={12} sm={12} lg={6} section>
          <aaa />
        </GridItem>
        <GridItem xs={12} sm={12} lg={6} section>
          <bbb />
        </GridItem>
      </GridContainer>
    </div>
  );
};

 

그렇다면 어떤 HTML들을 Component로 만드는 것이 좋을까?

HTML 태그들을 컴포넌트화 하는 것에 명확한 기준은 없지만 보통

• 사이트에 반복해서 출현하는 HTML 덩어리들
• 내용이 매우 자주 변경될 것 같은 HTML 부분들
• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용 전체를
• 또는 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업할 때

위와 같은 상황에서 HTML 태그들을 컴포넌트롸 시키면 좋다.

 

Component의 단점

일단 HTML 깔끔하게 쓰려고 Component를 수백개 만들면 그것 만으로도 관리가 힘들다.
예를 들어 Modal 컴포넌트 안에서 다른 컴포넌트에서의 변수 state를 쓰고싶어서 {변수} 이렇게 쓰면 잘 안되는데 왜냐면 당연히 자바스크립트에선 한 function(컴포넌트) 안에 있는 변수를 다른 function(컴포넌트)에서 맘대로 쓸 수 없기 때문이다.

이는 props라는 문법을 이용해 state를 컴포넌트까지 전해주는 것으로 다른 함수의 변수를 파라미터로 받아서 사용할 수 있다.

그렇다면 props란 무엇일까?

다음 번에는 props가 무엇인지 알아보도록 하자!

[출처]

코딩애플 "React 리액트 기초부터 쇼핑몰 프로젝트까지!"