[React] 04. 컴포넌트 - Component

 

 

 

 

 

🙆‍♂️컴포넌트

---

HTML로 코딩을 하다보면 div들이 너무 많아져서 코드 해석에 어려움을 느낄 때가 있는데 이 때 한 단어로 축약 시켜주는 것이 Component 입니다.

컴포넌트를 만들기 위해서는 3가지 단계를 거쳐야합니다.

1. 함수 만들기
2. return 안에 HTML 넣기
3. 컴포넌트 태그 작성

 

🚀 함수만들기

---

function Modal(){
  return (
    
  )
}

이런식으로 함수를 만듭니다. 함수를 만들 때 HTML을 작성하는 App()함수 밖에 선언합니다.

그리고 함수 작명은 첫글자를 대문자로 작성해줍니다.

let Modal = () => {}

or

const Modal = () => {}

이런식으로 만들 수 있습니다.

 

🚀 return 안에 HTML 넣기

---

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

이렇게 HTML 태그들을 return 소괄호 안에 작성해야합니다.

여기서 중요한 점은 예전 게시물에도 언급했듯 한 함수에는 하나의 태그만 있어야 합니다.

 

그래서 div 두개를 넣고 싶다면

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

fragment라고 DOM 구조에 별도 노드를 추가하지 않고 그룹화 시키는 방법이 있습니다. 

 

🚀 컴포넌트 태그 작성

---

<Modal></Modal>

태그 이름을 함수명으로 해서 작성하시면 끝입니다.

 

<Modal/>

더 축약시키고 싶다면 하나로 닫을 수 있습니다.

 

 

 

🙋‍♂️컴포넌트 언제쓰나?

---

1. HTML 태그들이 반복적으로 사용되는 곳에
2. 큰페이지들 라우터로 전환하려 할 때
3. 자주변경되는 UI들

 

그러나 남용하면 안됩니다.

그 이유는 컴포넌트를 사용하면 함수가 달라지기 때문에 State 공유가 안됩니다.