[코딩애플님 강의] 6. Component로 HTML 깔끔하게 줄이는 법

/* eslint-disable */

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

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 스커트 추천', '남자 봄옷 추천']);
  let [따봉, 따봉변경] = useState(0);

  // deep copy
  function 글자순정렬() {
    var newArray = [...글제목];
    newArray = newArray.sort()
    글제목변경( newArray );
  }

  return (

    <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>2월 17일 발행</p>
        <hr></hr>
      </div>
      <div className="list">
        <h3> { 글제목[1] } </h3>
        <p>3월 17일 발행</p>
        <hr></hr>
      </div>
      <div className="list">
        <h3> { 글제목[2] } </h3>
        <p>2월 17일 발행</p>
        <hr></hr>
      </div>

      <Modal /> 

    </div>

  );
}

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

export default App;​

리턴안에는 하나의 div만 있어야함

 

Component 만드는법

1. 함수 만들고 이름짓기

2. 축약을 원하는 HTML 넣고

3. 원하는 곳에서 <함수명 />

 

Component 유의사항

1. 컴포넌트의 이름의 시작은 대문자로

2. return() 안에 있는건 태그하나로 묶어야함

 

App도 일종의 컴포넌트이다.