React : 컴포넌트 사용하기

App.js

/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  return (
    <div className="App">
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </div>
  );
 

div className 이 modal 인 div 들이 여러개 정의되어야 한다고 하면 저 div 를 n 개만큼 복사 붙여넣기를 해야한다.

그러면 코드가 지저분 해진다.

 

 

 

 

# 컴포넌트

/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
       <Modal></Modal>
    </div>
  );
}
 
function Modal() {
  return (
    <>
      <div className="modal">
        <Modal></Modal>
      </div>
    </>
  )
}
 
 
const Modal = () => {
  return (
    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </>
  )
}
export default App;
 

이럴때 사용하는 것이 "컴포넌트" 라는 것이다.

Modal 을 함수로 정의 해 놓고, html 태그 안에서 <함수명></함수명> 또는 <함수명/> 으로 사용 하면, 

Modal 안에 있는 html 태그들을 가져다 쓸 수 있다.

15~23번째 줄과 26~36번째 줄은 같은 의미이다.

 

 

 

 

 

 

 

컴포넌트 안에는 <div> ... </div> <div> ... </div> 가 선언될 수 없으므로 제일 바깥에 의미 없는 태그인 <></> 를 같이 써주도록 한다.

 

 

 

참고로 React 프로젝트를 처음 생성하면 <App /> 이 render 안에 적혀 있을텐데,

이건 App.js 의 App() 함수 안에 있는걸 표시해준다는 것이다.

 

 

 

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

1. 반복적인 html

2. 큰 페이지

3. 자주 변경되는 것