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

root 태그에 div가 여러개 존재할 수 없다

우리는 항상 return ( 요 안에서 ) 작업을 하고 있다는 것을 기억해야한다.

그래서 모달 창을 만들때, 큰 div 안에 만든다

=> 이거 뭔가 코드의 구조는 다른데 Vue에서랑 비슷하네 ....?!
=> Vue에서도 template 안에 무조건 div 하나 들어가야했는데..

반복된 div 해결하기 component

<Modal></Modal>

<Modal />

=> 둘다 상관 없음

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

요래 함수로 별도로 만들어주면 됨

=> 정리하면
1. 함수 만들고 이름짓고
2. 축약을 원하는 HTML 넣고
3. 원하는 곳에서 <함수명 />

컴포넌트 만들시 관습 사항

1. 이름은 대문자로 시작

소문자로 만들면 렌더링이 안됨

2. 역시나 return 안에는 div 하나

div를 쓰기 싫다? 하면
프레그먼트라는 문법인
<>
</>

=> 이걸 쓰면 되긴 함 근데 굳이 ? 디브 써 걍

=>이렇게 보면 가장 큰 규모의 App도 컴포넌트

=> 이게 리액트를 쓰는 가장 큰 장점

=> 컴포넌트를 만들어 관리하기가 편해짐

컴포넌트로 만드는 기준

1. 반복출현하는 HTML 덩어리들

2. 자주 변경되는 HTML UI들

=> 재 렌더링이 자주 발생하는 부분만 컴포넌트로 만들면
=> 성능적으로 좋아진다.

3. 다른 페이지 만들 때도 컴포넌트로 만듦

=> 예를 들어, 기사 두개의 페이지를 한 페이지를 보이게 한다거나 그런거

컴포넌트의 단점

state를 쓸 때 복잡해짐

=> App함수 안에 state를 정의했기에 그냥 바로 접근해서 가져올 수 없다. props를 써야함 ..