[React] useState에서 배열

래림·2023년 4월 28일
1

React

목록 보기
7/7

배열을 useState써서 값을 추가하고싶었음. 처음엔 이렇게 하면 되려나 하고 시도했는데 안됨...

 let temp = topics;
          const newTopic = { id: nextId, title: title, body: body };
          temp.push(newTopic);
          setTopics(temp);



...을 이용해서 다음과 같이 하면 잘 된다.

 const newTopic = { id: nextId, title: title, body: body };
          setTopics([...topics, newTopic]);



강의에서 알려준 코드는

newTopics=[...topics];
newTopics.push(newTopic);
setTopics(newTopics);

둘다 잘 됨. 여기서 중요한거는
배열 원본데이터에 push를 하면 set함수를 호출할 때의 값과 그냥 value값이 똑같다고 생각하기 때문에 리엑트가 렌더링을 새로 안해줘서 UI에 표시가 안된다는 점이다. 새로운 변수에 배열값을 복사하여 set(새로운 배열)해줘야 함.






[강의 이거 참고함]https://www.youtube.com/watch?v=kctNCMFxciQ

0개의 댓글