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 }