state 를 사용할때, state의 값이 원시형(primitive: string,number,boolean등)인 경우
const [value,setValue] = useState(1);
setValue(2); //value의 값을 1에서 2로 바꾸는 엄연히 다른 데이터이므로
//다시 랜더링 된다.
하지만,
const [value,setValue] = useState([1]);
value.push(2); //value : [1,2]
setValue(value); //랜더링 되지 않음.
>>이처럼 useState의 초기값이 범객체(객체,배열 등)일 경우에는
리액트는 바뀌는 데이터가 같다고 생각하고(똑같은 하나의 배열이기 때문)랜더링을 다시 하지 않는다.
>>즉, 이때는 기존의 오리지널 value를 ...복제해서, 새로운 setValue를 넣어줘야한다.
const [value,setValue] = useState([1]);
newValue = [...value]; //객체일때는 {...value}
newValue.push(2);
setValue(newValue); //두개는 서로 다른(복제된)데이터로써 이때 비로소 다시 랜더링 된다.