Component

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

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

App 함수 외부에 함수를 하나 작성한다.
첫글자는 대문자로 구분 할 수 있게 작성한다.
그리고 return()안에 작성을 한다.

그리고 Modal을 저렇게 작성하면 html을 사용할 수 있다.

Component 만들 때 주의점으로는

1. component 작명할 땐 영어대문자로 보통 작명한다
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다.
3. function App(){} 내부에서 만들면 안된다.
   왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이다.
   component 안에 component 를 만들진 않는다.
4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다.

React에서 동적인 UI 만드는 Step
1. html css로 미리 UI 디자인을 다 해놓고
2. UI의 현재 상태를 state로 저장해두고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      (생략)
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

{}안에서는 if문을 사용할 수 없으니 삼중문법을 사용하도록 한다.