우리는 항상 return ( 요 안에서 ) 작업을 하고 있다는 것을 기억해야한다.
그래서 모달 창을 만들때, 큰 div 안에 만든다
=> 이거 뭔가 코드의 구조는 다른데 Vue에서랑 비슷하네 ....?!
=> Vue에서도 template 안에 무조건 div 하나 들어가야했는데..
<Modal></Modal>
<Modal />
=> 둘다 상관 없음
function Modal(){
return (
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
요래 함수로 별도로 만들어주면 됨
=> 정리하면
1. 함수 만들고 이름짓고
2. 축약을 원하는 HTML 넣고
3. 원하는 곳에서 <함수명 />
소문자로 만들면 렌더링이 안됨
div를 쓰기 싫다? 하면
프레그먼트라는 문법인
<>
</>
=> 이걸 쓰면 되긴 함 근데 굳이 ? 디브 써 걍
=>이렇게 보면 가장 큰 규모의 App도 컴포넌트
=> 이게 리액트를 쓰는 가장 큰 장점
=> 컴포넌트를 만들어 관리하기가 편해짐
=> 재 렌더링이 자주 발생하는 부분만 컴포넌트로 만들면
=> 성능적으로 좋아진다.
=> 예를 들어, 기사 두개의 페이지를 한 페이지를 보이게 한다거나 그런거
=> App함수 안에 state를 정의했기에 그냥 바로 접근해서 가져올 수 없다. props를 써야함 ..