components 사용하는 이유, 언제사용해? 리액트 컴포넌트 사용법

react 를 사용하다 보면 components를 언제 사용하는지 궁금할때가 있다.

components 문법이란 아래와 같다고 보면된다.

import { useState } from 'react';
import './App.css';

function App() {

  let [글제목] = useState(["여자코트추천", "남자코트추천", "이것저것추천"])
  let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="list">
        <h4>{ 글제목[0] }</h4><span onClick={ 따봉변경( 따봉 +1 ) }>*</span><div>{따봉}</div>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ 글제목[1] }</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{ 글제목[2] }</h4>
        <p>2월 17일 발행</p>
      </div>
    <Modal />
  </div>
  );
}

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

export default App;

 

여기에서의 컴포넌트는 맨 아래에있는  Modal,

즉 위에 삽입함 <Modal /> 이다.

 

이건 대체 언제 사용하냐?

 

1. 반복적인 html 축약할때 사용한다.

2. 큰페이지들

3. 자주 변경되는 것들에 사용해준다.

 

왜냐면 html에 작성을 하게 되면 지저분하고 코드가 한번에 보이지 않기때문데 사용한다고 보면된다.