complex state : arrays

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    const [thingsArray, setThingsArray] = React.useState(["Thing 1", "Thing 2"])
    
    function addItem() {
        setThingsArray(prevState => {
            return [...prevState, `Thing ${prevState.length + 1}`]
        })
    }
    
    const thingsElements = thingsArray.map(thing => <p key={thing}>{thing}</p>)
    
    return (
        <div>
            <button onClick={addItem}>Add Item</button>
            {thingsElements}
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'));

state가 array 일 경우에는 저렇게 useState 안에서도

["Thing 1", "Thing 2"]

이런식으로 기본 array를 넣어주고

function addItem() {
        setThingsArray(prevState => {
            return [...prevState, `Thing ${prevState.length + 1}`]

클릭하면 예전 array에 있는애들 나온다음, 새로운 array로 숫자 1이 추가되어서 나와야 하니까 이렇게 설정해줌.