useState를 배열로 초기화 했을 경우

• 텍스트title[0]을 클릭하면 다른 title[1]로 바뀌도록 구현하고자 한다. (title은 배열로 선언되어 있다.) 이때 주의할 점은, onClick={() => {setTitle(title[1])}}이 아닌, onClick={() => {setTitle([title[1]])}}인 [] 배열로!!! 선언한다는 것이다.

• 좀 더 나아가, useState (['강남 맛집 후기', '강남 카페 추천'])인 2개의 배열로 처음에 선언했다면, setTitle(['신촌 맛집 후기', '강남 카페 추천']); 도 2개의 배열로 선언해주는 것이 좋은 방법이라고 한다.

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

function App() { // React는 jsx 사용

  let [title, setTitle] = useState (['강남 맛집 후기', '강남 카페 추천']);
  let [like, setLike] = useState(0);
  let [hate, setHate] = useState(0);

  function titleChange() {
    setTitle(['신촌 맛집 후기', '강남 카페 추천']);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      <div className="list">
        <h3 onClick={titleChange}> {title[0]} 
          <span onClick={()=> {setLike(like+1)}}> 👍 </span> {like} 
          <span onClick={()=> {setHate(hate+1)}}> 👎 </span> {hate} 
        </h3>
        <p> 2월 17일 발행</p>
        <hr/>
      </div>

    </div>
  );
}

export default App;

• 좀 더 개발자답게 선언한다면, deep copy를 사용하면 된다.
  newTitle 변수에 title 배열을 deep copy 한 후, 변경하려는 title[0] 위치에 넣고 싶은 데이터를 newTitle[0]에 할당해준다. 후에 setTitle을 사용해서 state를 변경해주면 된다.

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

function App() { // React는 jsx 사용

  // var [a, b] = [10, 100]; // a에는 10, b에는 100을 담기
  let [title, setTitle] = useState (['강남 맛집 후기', '강남 카페 추천']);
  let [like, setLike] = useState(0);
  let [hate, setHate] = useState(0);

  function titleChange() {
    var newTitle = [...title];
    newTitle[0] = '신촌 맛집 후기';
    setTitle(newTitle);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      <div className="list">
        <h3 onClick={titleChange}> {title[0]} 
          <span onClick={()=> {setLike(like+1)}}> 👍 </span> {like} 
          <span onClick={()=> {setHate(hate+1)}}> 👎 </span> {hate} 
        </h3>
        <p> 2월 17일 발행</p>
        <hr/>
      </div>

    </div>
  );
}

export default App;