State
State -> 상태
상태가 변경될 때마다 화면을 새롭게 그려내는 방식으로 동작한다.
useState라는 함수를 활용해서 state를 바꾼다.
보통 이렇게 Destructuring 문법으로 작성
const [num, setNum] = useState(1);첫 번째 요소가 바로 state, 두 번째 요소 tate를 바꾸는 setter 함수
state를 변경하려면 변수에 새로운 값을 할당하는 방식이 아닌 Setter함수를 활용해야 함!
참조형 State
// ...
const [gameHistory, setGameHistory] = useState([]);
const handleRollClick = () => {
const nextNum = random(6);
gameHistory.push(nextNum);
setGameHistory(gameHistory); // state가 제대로 변경되지 않는다!
};
// ...gameHistory state는 배열 값 자체를 가지고 있는 게 아니라 그 배열의 주솟값을 참조하고 있기 때문에 push 메소드로 배열 안에 요소를 변경했다고 하더라도 결과적으로 참조하는 배열의 주솟값은 변경된 것이 아니게 됩니다.
리액트 입장에서는 gameHistory state가 참조하는 주솟값은 여전히 똑같기 때문에 상태(state)가 바뀌었다고 판단하지 않는 것이죠!
참조형 state를 활용할 때는 반드시 새로운 참조형 값을 만들어 state를 변경해야 합니다. 👉 Spread 문법(...) 을 활용
// ...
const [gameHistory, setGameHistory] = useState([]);
const handleRollClick = () => {
const nextNum = random(6);
setGameHistory([...gameHistory, nextNum]); // state가 제대로 변경된다!
};
// ...
//배열의 요소가 변한것이지 주소값은 처음 그대로이기 때문에 state가 변경되었다고
//판단하지 않아 화면을 새롭게 렌더링하지 않습니다.✨ 참조형 state를 활용할 땐 반드시 새로운 참조형 값을 만들어서 state를 변경해야 한다는 점. 꼭 기억해 두세요!
UIUX/Frontend