React - Component

모달창 UI

상세페이지 겸 모달창 UI를 하나 만들어보겠습니다.

일단 html과 css는 다음과 같습니다. 

<div className="modal">
  <h4>제목</h4>
  <p>날짜</p>
  <p>상세내용</p>
</div>

.modal{
  margin-top : 20px;
  padding : 20px;
  background : #eee;
  text-align : left;
}

 

위의 html코드를 작성할 때 유의할 점이 있습니다.

return()안에는 두개의 html태그를 나란히 적기가 안됩니다.

return()내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다.

(의미없는 div 쓰기 싫으면 <> </>로 감싸도됩니다. 이걸 fragment문법이라고 합니다)

 

 

Component문법

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

바로 Component입니다.

이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 넣을 수 있습니다. 

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

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

위의 코드처럼 작성하면 HTML을 한 단어로 줄일 수 있습니다.

줄이는 법은 

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

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

Component 주의점

위의 Component만들 때 주의할점이 있습니다. 

1. component작명할 땐 영어대문자로 보통 작명합니다. 
2. return () 안엔 html 태그들이 평행하게 여러개 들어 갈 수 없습니다.
3. function App{} 내부에서 만들면 안됩니다. App도하나의 컴포넌트입니다.
4. <컴포넌트></컴포넌트>이렇게 써도 되고 <컴포넌트/>이렇게 작성해도 됩니다. 

추가로 arrow function을 써도 됩니다. 

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

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

 

 

어떤 HTML들을 Component로?

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

 

Component단점

• HTML 깔끔하게 작성하려고 Component를 수백개 만들면 그것 만으로도 관리가 힘들다.
• 하나의 함수에 있는 state를 다른 함수에서 사용하려면 props라는 문법을 이용해야 하는데 번거롭다. 따라서 꼭 필요한 것만 Component로 사용

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌