[React] component

오늘의 React 찍먹에서 배운 것은 바로 컴포넌트(component)이다.

🤔 컴포넌트가 뭐야?

컴포넌트의 사전적 정의는 '구성 요소'이다.

react 내에서는 특정 html 코드를 좀 더 보기 편하게 묶어놓는 방식이라고 생각된다.

🤔 그럼 컴포넌트를 언제 써?

1. 반복적으로 출현하는 덩어리들(html)을 컴포넌트화 할 때
2. 전환이 되는 큰 페이지들
3. 자주 변경되는 것들

에 주로 사용한다고 한다!

🤔 컴포넌트 어떻게 써?

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

만약 위의 코드를 컴포넌트화를 시켜본다면
우선 우리는 함수를 만들어줘야한다.

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

기본적인 함수를 만들되 반드시 확인해야할 부분은 2가진데, 바로 1. 함수명 첫글자는 대문자 / 2. return()이 필요하다.

그리고 무조건 하나의 태그 안에서만 작성해야한다.
만약에 2가지 이상의 div 태그를 넣고 싶다고 치자.

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

만약 위와 같이 코드를 작성하면 안된다...!
return 안에 div태그가 2개가 있기 때문이다.

만약 저렇게 2가지 이상의 div를 사용하고 싶다면

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

위와 같이 무조건 1개로 묶는 div 혹은 빈 태그를 사용하면 된다. 참고로 <></> 이런 태그는 의미 없는 태그라고 하는데 react에서는 이 빈 태그도 허용한다고 한다. 신기하다 ✨

끝으론, 이렇게 Modal()이라는 함수에서 소괄호()를 날리고 함수명만 복사를 해서 원하는 위치를 찾아

<Modal></Modal> 

이렇게 함수명을 태그로 바꿔서 넣으면 끝!

굉장히 직관적이고 좋은 것 같다.