컴포넌트 만드는 법

리액트 에서는 html 의 div 가 너무 많아지면 코드의 가독성이 떨어지기 때문에 이를 위해 component 로 변경해주는 작업을 한다.

 

[정리]

1. 컴포넌트 만드는 방법

① function 만들고

② return() 안에 html 담기

③ <함수명></함수명> or <함수명/> 쓰기

 

---

1. 컴포넌트 만드는 방법

① function 만들기

- function 은 다른 function 바깥에 만들고, 영어 대문자로 시작해야 한다.

 

② return() 안에 html 만들기

- 기존의 html 문법에 따라 return 안에 html 코드를 작성한다.

 

③ <함수명></함수명> or <함수명/> 쓰기

- 만들어준 컴포넌트를 사용하고자 하는 곳에 작성한다.

 

---

2. 완성된 코드

App.js

/* eslint-disable */

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

function App() {
/**ES6 destructuring 문법
 * array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용
 * ex) 10,100을 a,b에 넣어주세요!
 * var [a,b] = [10, 100] 
 * 
 */
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '여자 겨울 옷 추천']);

  let posts = '강남 고기 맛집';
  
  let [따봉, 따봉변경] = useState(0); // 따봉변경은 state 변경용 함수를 의미함

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>

      <button onClick={() => {
        let copy2 = [...글제목];
        글제목변경(copy2.sort());
      }}>가나다순정렬</button>

      <button onClick={() => {
        let copy = [...글제목];
        copy[0] = '여자 코트 추천'
        글제목변경(copy);
      }}>글수정</button>

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

    </div>
  );
}

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

export default App;

 

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}
body {
  font-family: 'nanumsqare';
}

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

.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;
}

---

3. 컴포넌트 만들면 좋은 경우

① 반복적인 html 축약할 때

② 큰 페이지들 (페이지 전환시 사용)

③ 자주 변경되는 것들 (UI 등)

---

4. 컴포넌트 단점

state 가져다쓸 때 문제 발생! (A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없음)