[React] Component 사용법

위와 같은 모달을 페이지에 작성하고 싶다.

그런데 해당 모달은 한 페이지에서 많게는 수십개가 쓰일 수도 있다.

이런 경우 하나 하나 모두 코드로 작성하기에는 부담되기도 하고, 양이 많아질 수록 어떤 코드가

어떤 모달을 가리키는지 판단하기가 어려워진다.

 

이런 문제를 좀 더 간편히 하기위해 나온 것이 Component다.

 

Component 선언

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

export default Modal;

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

export default Modal;

둘 중 어떤 것을 작성해도 똑같이 작동한다.

단, return 안의 문장은 하나의 <div>로 묶여있어야 한다.

최외곽의 <div> 안에 다른 <div>나 태그들이 병렬로 있는건 상관없다.( <>  </>  로 대체 가능)

만약 Component 내부에 있는 값이 변경되고 싶지 않다면 반환 자료형을 let 대신 const 사용한다.

 

export 해주어야만 다른 js파일에서 해당 Modal을 import하여 사용할 수 있다.

Component 호출

import Modal from './component/modal'; // Modal Component가 있는 파일 import

function App() {

  return (
    <div className="App">
        ...
        ...
        ...
      <Modal></Modal>
      <Modal/>

    </div>
  );
}

 

결과 화면

컴포넌트로 만들면 좋은 것들

• 1. 반복적인 html을 축약할 때
• 2. 큰 페이지들 - 외부에서 불러와 Main이 되는 코드가 간결하게 되므로
• 3. 자주 변경되는 것들

 

컴포넌트의 단점

• state를 가져다 쓸 때, 다른 컴포넌트에 있는 state를 쓸 수 없기 때문에 불편하다.

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

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

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