Component

Component 문법

리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.

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

componet는 다음과 같이 사용한다.

1. function을 이용해서 함수 생성.

2. 함수 return () 안에 원하는 HTML 작성.

3. 원하는 곳에 함수명 작성 ( 예제에서는 <Modal></Modal> )

---

Component의 특징

1. Component 이름지으실 땐 영어대문자로 시작.

2. return () 안엔 태그들이 평행하게 여러개 들어갈 수 없다.
   평행하게 여러개의 태그를 쓰고 싶으면 <div>로 묶거나,<> </>로 묶는다.

function 예시컴포넌트(){
  return (
    <>
      <div>안녕</div>
      <div>안녕</div>
      <div>안녕</div>
    </>
  )
}

3. component 위치는 function App(){} 이것과 나란히 만들어준다.
   function App(){} 컴포넌트 생성문법이므로 보통 컴포넌트용 function 안에다가 컴포넌트용 function을 만들진 않는다.

4. component 안에 미리 만들어둔 component 가능.

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

5. 컴포넌트 이름은 한글로 작성시 작동하지 않을 수 있다.

---

Component의 단점

컴포넌트가 App(){} 안에 있는 state를 사용하고 싶을 때 바로 쓸 수 없다.
props라는 문법을 이용해 state를 컴포넌트까지 전해줘야 사용가능하다.