[React] Component

컴포넌트로 만들면 좋은 상황

1. 반복적인 html 축약할 때

2. 큰 페이지들

3. 자주변경되는 것들

=> 단점 : state 가져다 쓸 때 문제발생 

( 다른 함수(function) 에 있는 변수를 마음대로 가져다 사용 불가)

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

function App() {
  let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천'])
  let [date, changeDate] = useState('2월 17일 발행')
  let [cnt, plusCnt] = useState(0)

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>ReactBlog</h4>
      </div>
      <div className='list'>
        <h3>{title[0]}<span onClick={()=>{plusCnt(cnt+1)}}> ♥</span> {cnt}</h3>
        <p>{date}</p>
      </div>
      <div className='list'>
        <h3>{title[1]}</h3>
        <p>{date}</p>
      </div>
      <div className='list'>
        <h3>{title[2]}</h3>
        <p>{date}</p>
      </div>
    
      <Modal></Modal> {/* <Modal></Modal> = <Modal/> */}
      <Detail/>

    </div>
  );
}
/* 
컴포넌트 만드는 법
1. function 만들기 ( function 바깥 쪽에 새로운 function 만들기 -> 대문자로 만들기)
2. return() 안에 html 담기 -> 하나의 tag로 시작해서 하나의 tag로 끝나야 함 ex) <div></div><div></div> 병렬적으로 사용금지
   ( 두개를 병렬적으로 사용하고 싶을 때 큰 <div>  <div></div><div></div>  </div> 로 묶어서 사용 가능 ---> 바깥 <div> 틀 : 의미 X => <></> 형태로 사용 가능 )
3. <함수명></함수명> 쓰기 - html 원하는 위치에 <함수명></함수명> 형태로 사용 
*/
/* const/let Modal = () => {} 로 만들어도 상관 없음*/ 
function Modal(){
  return(
    <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

let Detail = () => {
  return(
    <>
      <div className='modal'>
        <h4>부제목</h4>
        <p>등록일</p>
      </div>
      <div className='modal'>
        <h4>소제목</h4>
      </div>
    </>
  )
}

export default App;

.black-nav {
  display: flex;
  background-color: black;
  color: white;
  padding-left: 20px;
  text-align: left;
  width: 100%;
}
.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}
.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}