[리엑트] 6) state 변경하는 방법
컴포넌트간의 값(데이터)를 서로 주고 받을때 많이 사용합니다.
변수 형태로 바인딩할때등. 프롭스와 같이 리엑트에서 중요한것중 하나인 state 변경에 관한 부분입니다.
let [fruit, setFruit] = useState('사과','배');
위와 같이 있을때 배열이 위는 2개지만 현업에선 5백개 들어 있다고 할때 전체 배열을 하드코딩 하여 넣을 수 없으니 실제는 json을 이용하거나 또는 첫번째의 것만 변경하고 싶을때는 아래와 같이 하면 됩니다.
아래처럼 하면 값이 복사가 아니라 공유가 되는 형태이다.
원하는 형태의 결과를 가져오지 않습니다.
let newFruit = fruit;
newFruit[0] = '바나나';
setFruit( newFruit );
* 복사를 할때는 deep copy를 해야 한다.
let newFruit = [...fruit];
newFruit[0] = '바나나';
setFruit( newFruit );
이것은 리엑트의 대 원칙인 immutable data 를 사용해야 되기 때문에 이렇게 처리 합니다.
리엑트에선 props와 state가 중요하게 사용하는데 특징은 다음과 같다.
props 자식컴포넌트에 값을 전달해줄때
state 컴포넌트간에 값을 주고 받을때
* 참고자료
코딩애플 - 리엑트기초 state 맘대로 변경하기
https://www.youtube.com/watch?v=CowLAnmhxMY&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=6