리액트에서 useState 를 사용하는 이유
리액트가 사용자의 인터렉션을 최소화 시켜주기위해 사용하는
웹 어플리케이션이다.
기존에는 사용자의 ui가 변경될때 웹의 새로고침이 필요하였는데
리액트의 state를 사용하게 되면
값이 바뀐다고 하더라도 새로고침없이 사용자에게 변경된 값을 보여줄 수 있다.
정리
useState 함수 인자 : state의 초기 Type, 값
state의 값이 바뀌어도 화면을 재랜더링(새로고침) 시킬 필요가 x
state의 값을 바꿀때는 항상 setState를 사용!
setState를 html태그의 on 속성에서 호출할때는 함수로 감싸주어야 한다.
-> 함수로 감싸주지 않으면 무한 렌더링이 되는걸 볼 수 있다.(에러)
useState에 배열이 들어올 경우 && 배열의 값을 변경 할경우
const [temp, setTemp] = useState([1,2,3]);
Return (
<div>
<button
onClick={() => {
setTemp(temp.push(4)
})
</div>
)setTemp(temp.pudh(4)) 와 같은 형식으로
배열에 4를 추가하면 버튼을 클릭했을때 [1,2,3,4] 가 되는것이 아닌 [4] 가 되는 모습을 볼 수 있다.
이 이유는 state 의 값을 바꿔줄때 초기값의 온전한 형태에서 바꿔주어야 하기 때문이다
=> 이를 불변성이라고 하며 찾아보면 도움이 될것 같습니다
이말은 setTemp([1,2,3,4]) 와 같은 형식으로 onClick 속성에 추가했을때 정상적으로 작동하는걸 알 수 있다.
하지만 이는 배열의 값이 많을 수록 비효율적인 방법이므로
스프레드 연산자를 사용하여 이를 효율적으로 해결할 수 있다.
먼저 state를 통해 배열을 관리할때
setState를 통해 state를 바꿔줄때는 새로운 배열을 만들어서 기존의 temp 배열을 대응되는 새로운 배열을 만들어서 코딩을 할 수 있다.
이말은 temp에 존재하는 [1,2,3]을 복사하여 새로운 배열에 넣어주면 된다는 뜻으로 아래와 같이 자바스크립트 상의 연산자로 사용할 수 있다. (스프레드 연산자)
onClick={() => {
let arr = [];
arr = […temp]
}}이후
onClick={() => {
let arr = [];
arr = […temp];
arr.push(4);
setTemp([…arr]);
}}temp를 복사한 arr에 push로 4를 추가해주면
원하는 대로 [1,2,3]에 4를 추가할 수 있다.
