[React] Component 생성, 파일분리

복잡한 html을 한 단어로 치환할 수 있는 Component 문법

리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다.
component라고 합니다.
이걸 이용하면 함수나 변수를 만들듯이 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 넣을 수 있습니다.

• function을 이용해서 함수를 하나 만들어주고 return안에 JSX를 작성한다.
• 원하는 곳에 <함수명 />을 넣어준다.

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

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

Component 만들 때 주의 점

1. Component 작명 시 첫 글자는 대문자로 한다.
2. <Modal /> 로 써도 되고 <Modal></Modal>로 써도 된다.

Component 파일 분리

1. 부모 component에 자식 component를 import한다

// App.js
import Modal from './component/Modal.js'

// 여러개 import시 export 명과 순서 중요
import { a, b } from './component/Modal.js'

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

export default App;

2. 자식 component 파일을 분리해서 생성 후 export default 한다.

function Modal () {
  return (
    <div>나는 모달 컴포넌트</div>
  )
}

export default Modal;

// 여러개 export 가능
export { a, b }