리액트 정리(3). Component란?

Component란

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

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

function Modal(){ // 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을 써도 된다.

let Modal = () => {
  return ( <div></div>) 
}

어떤 HTML들을 Component로 만드는 것이 좋을까?

HTML 태그들을 컴포넌트화 하는 것에 명확한 기준은 없지만 보통
-사이트에 반복해서 출현하는 HTML 덩어리들
-내용이 매우 자주 변경될 것 같은 HTML 부분들
-다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용 전체를
-또는 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업할때
위와 같은 상황에서 HTML 태그들을 컴포넌트화 시키면 좋다.

Component의 단점

일단 HTML 깔끔하게 쓰려고 Component를 수백개 만들면 그것 만으로도 관리가 힘들다.
예를 들어 function Modal 안에서 변수 state를 쓰고싶어서 {변수} 이렇게 쓰면 잘 안되는데 왜냐면 당연히 자바스크립트에선 한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없기 때문이다. 이는 props라는 문법을 이용해 state를 컴포넌트까지 전해주는 것으로 다른 함수의 변수를 파라미터로 받아서 사용할 수 있다.

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