[react] Component : 많은 div 들을 한 단어로 줄이고 싶을 때

<div className = "modal">

      <h4>제목</h4>

      <p>날짜</p>

      <p>상세 내용</p>

    </div>

.modal{

  margin-top: 20px;

  padding: 20px;

  background-color: #eee;

  text-align: left;

}

 

이런 모달창 하나를 디자인 해준다. 

 

복잡한 html 을 한 단어로 치환할 수 있는 컴포넌트 문법

 

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

함수 문법을 이용해서 html 을 하나의 태그로 만들어 가독성을 높일 수 있음 

 

 

const Modal = () => {

  return (

    <div className = "modal">

      <h4>제목</h4>

       <p>날짜</p>

       <p>상세 내용</p>

     </div>

  )

}

function Modal(){

  return (

    <div className = "modal">

      <h4>제목</h4>

      <p>날짜</p>

      <p>상세 내용</p>

    </div>

  )

 

 

두 방식 모두 가능함 

 

 

단 return 안에 두 개의 <div> 를 나란하게 <div></div><div></div> 이렇게 적는 것은 불가능함 

 

의미없는 div를 쓰기 싫다면 <></> 이걸로 감싸도 된다. << fragment 문법

 

 

컴포넌트 만드는 법 정리

1. function을 이용해서 함수를 하나 만들어 줌

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

3. 원하는 곳에 <함수명></함수명> 또는 <함수명/> 

 

 

컴포넌트 만들 때 주의 점

 

1. 컴포넌트 작명할 땐 영어 대문자로 작명 

2. return () 안엔 html 태그 들이 평행하게 여러 개 들어갈 수 없다.

3. function App(){} 내부에서 만들면 안됨 App 자체가 하나의 컴포넌트임 

4. <컴포넌트></컴포넌트> 이렇게 써도되고 <컴포넌트/> 이렇게 써도됨

5. arrow function 써도 됨 (받는 변수는 주로 const)

 

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

 

- 사이트에 반복해서 출현하는 html 덩어리들

- 내용이 매우 자주 변경될 것 같은 html 부분

- 다른 페이지를 만들고 싶을 때 그 페이지의 html 내용을 하나의 컴포넌트로 만드는게 좋다

- 또는 다른 팀원과 협업할 때 웹 페이지를 컴포넌트 단위로 나눠서 작업을 분배