리액트 기초 예제 jsx/state/prop/map/컴포넌트

 

 

 

/* eslint-disable */

import logo from './logo.svg';

import './App.css';

import river from './river.jpg';

import React, { useState } from 'react';

function App() {

  addEventListener('click',()=>{

  })

  let [topic,topicChange] = useState(['ㄱ뷰 좋은 캠핑장',  'ㄴ뷰 좋은 카페', 'ㄷ뷰 좋은 음식점']);

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

 const postProps = {

  postsData :[

  {topi : 'ㄱr뷰 좋은 캠핑장' , date : '2023-10-31'},

  {topi : 'ㄴr뷰 좋은 캠핑장' , date : '2023-10-29'},

  {topi : 'ㄷr뷰 좋은 캠핑장' , date : '2023-10-30'}

  ]  

};

  {/* ES6 destructuring 문법 */}

 

  let posts = '뷰 좋은 카페';

  function changeTopicfunc(){

    var topicTemp = [...topic];       //deepcopy 하지않으면 값 공유가 일어남 꼭 deepcopy할것

                                      //... spread opverator

    topicTemp[0] = '애견동반캠핑장';   //state 는 함수와 치환함수로 변경한다.

    topicChange(topicTemp);

  }

  function topicSort(){

    var topicTemp = [...topic];      

                                     

    topicTemp.sort();

    topicChange(topicTemp);

  }

  function topicReverse(){

    var topicTemp = [...topic];      

                                     

    topicTemp.reverse();

    topicChange(topicTemp);

  }  

  return(

    <div className="App">

     

      <div className="h-nav"  //nav css

      >

        <div> blog </div>      

      </div>

      <img src={river} />

      <button onClick={ changeTopicfunc } >버튼 </button>

      <button onClick={ topicSort } > 오름차순 </button>      

      <button onClick={ topicReverse } > 내림차순 </button>          

      <div className="list">

          <h3> {topic[0]}   <span onClick={()=> {lickChange(like + 1)}}>❤️</span>{like}  </h3>

          <p>2023-10-31</p>

          <hr/>

      </div>

      <div className="list">

          <h3> {topic[1]}</h3>

          <p>2023-10-30</p>

          <hr/>

      </div>      

      <div className="list">

          <h3> {topic[2]}</h3>

          <p>2023-10-29</p>

          <hr/>

      </div>  

      fff

      <Modal/>

      <ObjectSet {...postProps}/>  

      <br />ddd

    </div>

  );

  function Modal(){

    return(

      <>

        <div>컴포넌트 만들기 테스트 </div>

      </>

    )

  }

  function ObjectSet(propsfunc){

   

    const {postsData} = propsfunc; // 비구조화 할당

    return(

      <div >

       

        {postsData.map((post0, index) => (

        <div className="list" key={index}>

          <h3> {post0.topi}   <span >❤️</span> </h3>

          <p>{post0.date}</p> {index}

          <hr/>

        </div>                

        ))}        

 

      </div>

    )

  }

}

export default App;