[React] state 변경

/* eslint-disable*/


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

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '강남 고기 맛집','강남 냉면 맛집']);
  let [음표, 음표변경] = useState(0);
  let posts = '강남 고기 맛집';
  // 음표변경('대체할 데이터'); => 함수! 
  let [버튼, 버튼변경] = useState(글제목[2]);



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

export default App;

노 권장 사항... ?

 

 

 

예시 답안

권장 

- 변경함수( 대체할 데이터) 쓰기

- state 는 직접 건들지말고 

deep copy 해서 그걸 건들기

/* 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 );
  }

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

export default App;

 

 

 

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

export default App;

이제 순서를 바꾸고 싶은데 어떻게 하냐?

  // 순서바꾸는 거 어떻게 하는가...
  function 순서바꾸기(){
    var reverse = [...글제목];
    reverse = reverse.reverse();
    글제목변경 ( reverse );
  }

맞는지 모르겠다리