[React]Component 사용하는 방법

[React]Component 사용하는 방법

컴포넌트란?

컴포넌트란 재사용 가능한 최소 단위를 뜻합니다. 리액트에서는 사용자에게 보여주는 UI를 컴포넌트화 해서 사용합니다.

컴포넌트 만드는 방법

function Modal(){ // 1.함수를 만든다.
  return( // 2.html을 넣는다.
      <div className='modal'>
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

      <Modal></Modal> // 3. 컴포넌트를 불러온다.

컴포넌트 만들때 주의사항

전체 코드

App.js

/* eslint-disabl */

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']);
  let [따봉, 따봉변경] = useState(0);
  let posts = '강남 고기 맛집';

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자 코트 변경';
    newArray[1] = '연희동 맛집 추천'
    글제목변경(newArray);
  }

  return ( //return 안쪽에 html 문법을 작성할 수 있다.
    <div className="App">
      <div className="black-nav">
         <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      <div className='list'>
        <h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉+1)} }>👍</span>{따봉}</h3>
        <p>12월 17일 발행</p>
        <hr/>
      </div>
      <div className='list'>
        <h3> { 글제목[1] } </h3>
        <p>12월 17일 발행</p>
        <hr/>
      </div>
      <div className='list'>
        <h3> { 글제목[2] } </h3>
        <p>12월 17일 발행</p>
        <hr/>
      </div>
      <Modal></Modal>
    </div>
  );
}

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

export default App;

App.css

.App {
  text-align: center;
}

body {
  font-family: "nanumsquare";
}

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
}

.black-nav {
  background-color: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

.list {
  margin-top: 30px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

결과 화면