[React] CH06. Component : 많은 div들을 한 단어로 줄이는 방법

1. 리액트의 Component 문법 : HTML을 한 단어로 줄여서 쓸 쑤 있는 방법

• Component 정의
  - 축약한 HTML 덩어리
  - 리액트에서 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법 
• Component 만드는 법
  1) function을 이용하여 함수 만들고 이름짓기
  2) 함수안에 축약을 원하는 HTML을 넣기
  3) 원하는 곳에서 <함수명/> 사용 

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <Modal></Modal>
    </div>
  )
}

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

※ Component 유의사항
1) 관습적으로 Component의 함수명은 대문자로 시작함
2) return() 안에 div가 나란히 연속적으로 등장할 수 없음 → 쓰고 싶다면 전체를 하나의 div 또는 태그로 묶기

# 오류
return(
    <div></div>
    <div></div>
    <div></div>
)

# 정답1
return(
    <div>
    	<div></div>
        <div></div>
        <div></div>
    </div>
)

# 정답2
return(
    <>
    	<div></div>
        <div></div>
        <div></div>
    </>
)

※ component 안에 미리 만들어둔 다른 component 집어 넣기 가능

function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
      <다른컴포넌트></다른컴포넌트>
    </div>
  )
}
function 다른컴포넌트(){
  return ( <div> 안녕 </div> )
}​

---

2. Component로 만들면 좋은 상황

• 반복 출현하는 HTML 덩어리
• 자주 바뀌는 HTML UI들 → 재 랜더링이 많이 일어나는 것들
• 다른 페이지 만들 때도 컴포넌트로 만듦

---

3. Component의 많이 만들때의 단점

• state 쓸 때 복잡해짐
  - 상위 component에서 만든 state를 쓰려면 props문법 이용해야 함

# 오류 : 글제목[0]은 function App()에서만 선언했기에 쓸 수 없음
function Modal(){
  return (
    <div className="modal">
        <h2>{ 글제목[0] }</h2>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

---

[ 참고 ]

 

https://online.codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌