[React] component 사용

불가능  !! ! ! 

return( 

<div></div>
<div></div>
<div></div>

)

) 

 

 

component 사용

      {/* <div className='modal'>
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div> */}
      
      <modal></modal>

 

 

/* eslint-disable*/


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 );
  // }
 
  // // 순서바꾸는 거 어떻게 하는가...
  // function 순서바꾸기(){
  //   var reverse = [...글제목];
  //   reverse = reverse.reverse();
  //   글제목변경 ( reverse );
  // }

  return (
    <div className='App'>
      <div className='black-nav'>
        <div>개발 Blog</div>
      </div>
      <Modal></Modal>
      {/* <button onClick={ 제목바꾸기 }>제목버튼</button>
      <button onClick={ 순서바꾸기 }>순서버튼</button> */}
      <div className='list'>
        <h3>{ 글제목[0] }<span onClick={ ()=> {음표변경(음표 + 1)} }>♬</span> {음표} </h3>
        <p> 2월 17일 발행 </p>
        <hr/>
      </div>
      <Modal/>
      <div className='list'>
        <h3>{ 글제목[1] }</h3>
        <p> 3월 17일 발행 </p>
        <hr/>
      </div>
      <div className='list'>
        <h3>{ 글제목[2] }</h3>
        <p> 4월 17일 발행 </p>
        <hr/>
      </div>
      <Modal></Modal>
  </div>
  );
}


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






export default App;

넣고 싶은 자리에 <component>를 넣기만 하면 된다 

component 를 만들어두면 html 관리가 편해진다. 

 

1. 이름은 대괄호 

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

return ()내부를 묶을 때 <> </> 를 사용

 

 

 

> component 로 만들면 좋은 것들 

- 반복 출현 하는 html 덩어리들

- 자주 변경되는 html ui 들 

- 다른 페이지 만들 때도 컴포넌트로 만듦

 

단점 :: 

1. state 쓸 때 복잡해짐 ( 상위 component 에서 만든 state쓰려면 prop을 사용해야함)