컴포넌트 : 많은 div를 한단어로 줄이고 싶다면

리액트는 긴 html 을 한단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. 

바로 Component라고 합니다.

이걸 이용하면 html을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다.

 

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

컴포넌트 만드는법

1. function 을 이용해서 함수를 하나 만들어주고 작명합니다

2. 그 함수안에 return() 안에 축약을 원하는 html을 담으면 됩니다

3. 원하는 곳에 <함수명></함수명> 사용하면 아까 축약한 html이 등장합니다

 

컴포넌트 만들때 주의할점

1. 보통 영어대문자로 작명

2.return () 안엔 html 태그들이 평행하게 여러개 XX, 대왕 태그 하나로 감싸줘야함

3. function App(){} 내부에서 만들면 안됩니다. 왜냐면 function App(){} 도 컴포넌트 생성문법이져?

 컴포넌트 안에 또 컴포넌트를 만들진 X

4.<컴포넌트></컴포넌트> 이렇게 써도 되고, <컴포넌트/> 이렇게 써도 됩니다

 

참고로, arrow function 써도 됩니다

function Modal(){
return (<div></div>)
}

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

 

 

어떤 html 친구들을 컴포넌트로 만드는 게 좋을까요?

 - 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋습니다.

 

하지만, 막 맘대로 컴포넌트를 만들어버리면 다른 함수 안에 있는 state를 데려오기 어렵기 때문에

오히려 번거로워질 수 있습니다.

(props라는 문법을 이용해 state를 <Modal>까지 전해줘야 비로소 사용가능합니다.)

 

props를 배우진 않았지만 듣기만 해도 복잡해........

 꼭 필요한 곳만 Component로 쪼개야겠습니다~