[React] 컴포넌트 이해하기

1. 컴포넌트 생성하기

 

컴포넌트는 하나의 HTML 덩어리라고 이해하면 된다.

 

코딩애플 강의를 보면서 만든 간단한 블로그 페이지

 

아래에서는 <Modal></Modal> 이 부분이 컴포넌트이다

 

 

 

App.js 코드

/* eslint-disable */

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

function App() {


  let [title, setTitle] = useState([
    '캠핑가자',
    'FC서울 직관 후기',
    '바버 레인부츠 후기, 추천!!',
    '오늘의 일기']);

  let [like, setLike] = useState(0);

  function changeTitle() {
    var newArray = [...title]; /*deep copy*/ 
    newArray[0] = '현종이랑 캠핑가자';
    setTitle( newArray );
  }
  

  return (
    <div className="App">
      <div className="black-nav">
        <div>Jonny&Jayne Blog 🥰</div>
      </div>
      <div className="list">
        <h3> { title[0] } <span onClick={ ()=>{ setLike(like + 1)} }>👍</span> { like } </h3>
        <p>7월 13일 발행</p>
      <hr/>
      </div>
      <div className="list">
        <h3> { title[1] } </h3>
        <p>7월 13일 발행</p>
      <hr/>
      </div>
      <div className="list">
        <h3> { title[2] } </h3>
        <p>7월 13일 발행</p>
      <hr/>
      </div>
      <div className="list">
        <h3> { title[3] } </h3>
        <p>7월 13일 발행</p>
      <hr/>
      <button onClick={ changeTitle }>버튼</button>
      </div>
      <Modal></Modal> 
      <CompPractice></CompPractice>
    </div>
  );
}

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

function CompPractice () {
  return (
    <div className= "compPractice">
      <h2>경고</h2>
      <p>이 컴포넌트는 연습용 컴포넌트입니다.</p>
    </div>
  )
}

export default App;

CSS 코드

.App {
  text-align: center;
}

body {
  font-family: nanumsquare;
}

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

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

.black-nav {
  background: rgb(208, 89, 89);
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 800;
  font-size: 20px;
  box-sizing: border-box;
}

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

2. 컴포넌트 만드는 법

• 컴포넌트 명칭은 대문자로 시작한다
• return()안에 있는건 태그하나로 묶어야함; div든 p든 태그는 하나만 사용!
• 의미없는 <div>쓰기 싫으면 <></> fragment문법 활용

3. 컴포넌트 만드는 기준 

• 반복적으로 출현하는 것들 (리스트) 
• 사이트에서 자주 바뀌는 HTML UI들 (재랜더링이 자주 일어나는 경우) 
• 다른 페이지 만들때도 컴포넌트로 만듦

 

4. 컴포넌트 단점 

• state를 쓸때 복잡해짐 (변수의 범위가 제한되기 때문이다) 
• 상위 컴포넌트에서 만든 state를 쓰려면 props라는 문법을 이용해야함(안쓰는게 안헷갈릴거같다)