React - Component : 많은 div들을 한 단어로 줄일 때

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

html css 레이아웃

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

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

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

html 코드 짤 때 유의점!
return() 안에 두개의 html 태그를 나란히 작성은 불가능XX
return() 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야한다

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

굳이 <div> 두개를 나란히 적고싶다면 하나의 div로 감싸도 괜찮다
의미없는 div를 쓰기 싫으면 <></> 로 감싸도 된다
-> fragment 문법

복잡한 html을 한 단어로 치환할 수 있는 Component 문법

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

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이 그 자리에 들어간다

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

Component 만들 때 주의점

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

arrow function

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

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

이렇게 쓰는 것도 가능하다