Component

상세 페이지 경 모달 창 UI 만들기

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

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

• html 코드 짤 때 return() 안에 두개의  html 태그 나란히 적기 안됨.
• 하나의 태그로 시작해서 하나의 태그로 끝나야 됨.
• 의미 없는 div 쓰기 싫다면 <> </> 이걸로 감싸도 됨.

return(
  <div>
    <div></div>
    <div></div>
  </div>
)

return(
  <>
    <div></div>
    <div></div>
  </>
)

Component 문법

• 긴 html을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법
• 함수 만들듯, 변수 만들듯 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 이 등장

Component 만들 때 주의점

•  component 작명할 때 영어 대문자로 보통 작명
• return() 안에 html 태그들이 평행하게 여러개 들어갈 수 없음
• function App() {} 내부에서 만들면 안됨
  • function App도 컴포넌트기 때문에 component 안에 component를 만들지 않는다.
• <컴포넌트></컴포넌트> 이렇게 써도 되고 </컴포넌트> 이렇게 써도 됨

만들기 좋은 Component

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

Component의 단점

• 너무 많이 만들어진다면 관리가 힘듬
• 다른 함수 안에 쓰던 변수를 가져다가 쓰려면 props를 사용해서 써야하기 때문에 번거로울 수 있음