출처 :&nbsp;<a href="https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np" target="_blank">https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np</a>&nbsp;<h2>배열</h2><div style="background-color:rgb(30, 30, 30);color:rgb(212, 212, 212);font-family:D2Coding, Consolas, &quot;Courier New&quot;, monospace, Menlo, Monaco, &quot;Courier New&quot;, monospace;font-size:13px;line-height:20px;white-space:pre;"><div>const [todos, setTodos] = useState([]);</div><div>&nbsp;</div></div>&nbsp;<h3>배열에 추가</h3>slice 구분으로 전체 배열을 복사한 다음 복사한 배열에 객체를 추가한 뒤 복사한 배열로 설정한다.<div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleAdd = (todo) =&gt; {</div><div>&nbsp; const newTodos = todos.slice()</div><div>&nbsp; newTodos.push(todo)</div><div>&nbsp; setTodos(newTodos)</div><div>}</div></div> &nbsp;스프레드 연산자(...)로 배열을 복사할 수도 있다.&nbsp;<div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleAdd = (todo) =&gt; {</div><div>&nbsp; const newTodos = [...todos]</div><div>&nbsp; newTodos.push(todo)</div><div>&nbsp; setTodos(newTodos)</div><div>}</div></div> &nbsp;또는 스프레드 연산자로 복사와 함께 새로운 객체를 넣은 배열을 만들 수도 있다.&nbsp;<div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleAdd = (todo) =&gt; {</div><div>&nbsp; setTodos([...todos, todo])</div><div>}</div></div>&nbsp;&nbsp;<h3>배열에서 제거</h3><div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleRemove = (todo) =&gt; {</div><div>&nbsp; const newTodos = todos.filter((t) =&gt; t !== todo)</div><div>&nbsp; setTodos(newTodos)</div><div>}</div></div>&nbsp;<h3>배열 업데이트</h3><div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleUpdate = (index, todo) =&gt; {</div><div>&nbsp; const newTodos = [...todos]</div><div>&nbsp; newTodos[index] = todo</div><div>&nbsp; setTodos(newTodos)</div><div>}</div></div> &nbsp;<hr>&nbsp;<h2>오브젝트</h2><div style="background-color:rgb(30, 30, 30);color:rgb(212, 212, 212);font-family:D2Coding, Consolas, &quot;Courier New&quot;, monospace, Menlo, Monaco, &quot;Courier New&quot;, monospace;font-size:13px;line-height:20px;white-space:pre;"><div>const [todos, setTodos] = useState({});</div><div>&nbsp;</div></div>&nbsp;<h3>오브젝트에 추가</h3>assing 함수를 사용하여 새로운 객체에 속성을 병합한 다음 새로운 객체의 속성을 변경하여 새로 할당한다.<div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleAdd = (todo) =&gt; {</div><div>&nbsp; const newTodos = Object.assign({}, todos)</div><div>&nbsp; newTodos[propsName] = todo</div><div>&nbsp; setTodos(newTodos)</div><div>}</div></div>&nbsp;스프레드 연산자를 사용하여 얕은 복사로 사본을 만들 수도 있다.&nbsp;<div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleAdd = (todo) =&gt; {</div><div>&nbsp; const newTodos = { ...todos }</div><div>&nbsp; newTodos[propsName] = todo</div><div>&nbsp; setTodos(newTodos)</div><div>}</div></div>&nbsp;배열과 마찬가지로 스프레드 연산자를 사용하여 한 번에 변경도 가능하다.<div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleAdd = (todo) =&gt; {</div><div>&nbsp; setTodos({ ...todos, propsName: todo })</div><div>}</div></div>&nbsp;&nbsp;<h3>오브젝트에서 제거</h3><div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleRemove = (todo) =&gt; {</div><div>&nbsp; const newTodos = { ...todos }</div><div>&nbsp; delete newTodos.propsName</div><div>&nbsp; setTodos(newTodos)</div><div>}</div></div> &nbsp;<h3>오브젝트 업데이트</h3>추가와 마찬가지로 키가 이미 있는 경우 값을 덮어쓴다.<div style="background-color:#1e1e1e;color:#d4d4d4;font-family:D2Coding, Consolas, 'Courier New', monospace, Consolas, 'Courier New', monospace;font-size:13px;font-weight:normal;line-height:18px;white-space:pre;"><div>const handleUpdate = (todo) =&gt; {</div><div>&nbsp; setTodos({ ...todos, propsName: todo })</div><div>}</div></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

[react & next.js] React State에서 객체(object) 및 배열(array) 업데이트를 위한 치트 시트