리액트 Button을 누르면 state 변경 값으로 전환 *원본 데이터 보존

버튼을 누르면 state 변경 값으로 전환 되게끔 할 수 있다. 

 

- 방법 1 : 배열을 그대로 가져와서 수정하기

let [articleList, articleSwitch] = useState(['남자코트 추천', '강남 우동 맛집', '파이썬 독학']);
   
   return (
        <button onClick={()=> 
        	articleSwitch(['여자코트 추천', '강남 우동 맛집', '파이썬 독학'])}> 글변경버튼
        </button>
   )

 

하지만 이렇게 할 경우에는 원본 데이터인 articleList가 보존이 안되고 여자코트 추천으로 바뀌기 때문에 적합하지 않다. 

 

그래서 우리는 원본 데이터를 보존하면서 state를 사용해야하는 것이다. 

 

 

- 방법 2 : 원본 데이터 보존하면서 값 변경

let [articleList, articleSwitch] = useState(['남자코트 추천', '강남 우동 맛집', '파이썬 독학']);
   
   return (
        <button onClick={()=> 
        	let copy = [...articleList]; #원본 데이터 값의 복사본 만들기
        	articleSwitch(['여자코트 추천', '강남 우동 맛집', '파이썬 독학'])}> 글변경버튼
        </button>
   )

 

** 주의사항

let copy = articleList;  (X)
let copy = [...articleList]; (O)

 

복사본을 만들 때, 실제로는 배열의 참조를 만들고 있어서 copy를 수정하면 원본 articleList도 수정될 수 있다. 그렇기에 배열의 얕은 복사(shallow copy)를 만들어야 한다. 이때는 전개 연산자(...)를 사용하면 된다.