[React.js]map함수의 정확한 활용과 useState최적화

'별코딩'님의 유튜브를 보다가 정말 중요하고 명확한 강의를 보아서 정리해 두려고 한다. 

https://www.youtube.com/watch?v=QC3PtSlzp3s 

---

기본 코드

아래 코드는 아주 단순한 input에 텍스트를 입력 후 추가 버튼을 누르면 li가 추가되는 간단한 코드이다. 

몇 가지 내가 몰랐던 부분들을 정리하려고 한다. 

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


function App() {
  const [inputValue, setInputValue] = useState('');
  const [list, setList] = useState(()=>['밥먹기', '코딩하기']);

  const addList = () => {
    setList((prevList) => {
      return [...prevList, inputValue];
    });
    setInputValue("");
  }
  
  return (
    <div className="App">
      <input
        value={inputValue}
        onChange = {(e) => setInputValue(e.target.value)}
      />
      <button 
        onClick={addList}>추가</button>
      <ul>
        {
          list.map((item) => {
            return <li key={item}>{item}</li>;
          })
        }
      </ul>
    </div>
  );
}

export default App;

---

콜백함수로 State에 데이터 추가하기

set함수에 콜백함수가 들어갈 수 있는지 처음 알았으며, 위 코드처럼 state값을 수정할 수 있다. 

간단히 설명 하면 set함수로 들어가는 콜백 함수의 인자는 prev. 즉, 현재 state 값이다. 따라서 위처럼 콜백함수를 만들어 주면 깔끔하게 set함수를 사용해 state를 변경할 수 있다. 

...
const addList = () => {
    setList((prevList) => {
      return [...prevList, inputValue];
    });
    setInputValue("");
  }
  ....

---

useState에 콜백함수로 초기 데이터 세팅

list를 위해 선언해 둔 useState의 초기값을 콜백함수로 넣었다. 이렇게 하면 맨 처음 랜더링 될때만 초기값을 불러오게 된다. 

(충격)

최적화에 중요한 개념인 것 같다. 

const [list, setList] = useState(()=>['밥먹기', '코딩하기']);

---

map함수를 사용할 때 index를 key로 사용하지 않기!

(충격) 리액트 공식 문서에서도 막는 사항이였다.

그러면 당연히 이런 의문이 생긴다. 

'리스트 항목들에 고유 key가 필요한 사항에 어떡하나?'

이 부분 역시 별코딩님께서 설명해주셨다. 답은 state안에 데이터를 Object로 넣어 id값을 넣어야 한다. 

---

배운 점, 배울 점

별코딩님 감사합니다. 

정글에서 했던 kidsquiz 프로젝트에서 데이터가 2번씩 4번씩 오는 부분에 대해 위 사항을 고려하지 않아서 그랬던 것 같다. 수정해 보자!