[웹 게임을 만들며 배우는 React] 5장
클래스 컴포넌트의 라이프 사이클
- componentDidMount (처음 렌더가 실행되고 componentDidMount 가 실행된다.)
- componentDidUpdate (리렌더가 발생하고 실행된다.)
- componentWillUnMoun (컴포넌트가 제거되기 직전에 실행된다.)
constructor -> 렌더링 -> ref -> componentDidMount -> (setState/props 바뀔때)-> shouldComponentUpdate ->
render -> componentDidUpdate
// 부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸
Closure 문제
비동기 함수인 setInterval 안에서 비동기 함수 밖에 있는 변수를 참조하면 Closure 가 발생하게 된다.
다음 코드는 setInterval 밖에 있는 변수인 imgCoord 를 참조한 상황이다.
componentDidMount() {
// 컴포넌트가 첫 렌더링된 후, 여기에 비동기 요청을 많이 해요
const { imgCoord } = this.state;
this.interval = setInterval(() => {
if (imgCoord === rspCoords.바위) {
this.setState({
imgCoord: rspCoords.가위,
});
} else if (imgCoord === rspCoords.가위) {
this.setState({
imgCoord: rspCoords.보,
});
} else if (imgCoord === rspCoords.보) {
this.setState({
imgCoord: rspCoords.바위,
});
}
}, 100);
}
이렇게 참조할 변수를 setInterval 안에 넣어주었어야했다.
componentDidMount() {
// 컴포넌트가 첫 렌더링된 후, 여기에 비동기 요청을 많이 해요
this.interval = setInterval(() => {
const { imgCoord } = this.state;
if (imgCoord === rspCoords.바위) {
this.setState({
imgCoord: rspCoords.가위,
});
} else if (imgCoord === rspCoords.가위) {
this.setState({
imgCoord: rspCoords.보,
});
} else if (imgCoord === rspCoords.보) {
this.setState({
imgCoord: rspCoords.바위,
});
}
}, 100);
}
이번장에서 배운것은
setInterval 을 사용하면 꼭 clearInterval 을 사용해서 메모리 누수를 없애줘야한다 정도랄까.
고차함수 패턴
다음과 같이 button 안에 () => 애로우 펑션으로 되어있는 함수를 고차 함수 패턴으로 없애 줄 수 있다.
인라인 형태로 저렇게 선언이 되면 렌더링 될때마다 함수가 계속 재생성 되므로 좋지않다. 따라서 따로 빼주는 것이 옳다.
onClickBtn = (choice) => {
...
};
render() {
const { result, score, imgCoord } = this.state;
return (
<>
<div>
<button
id="rock"
className="btn"
onClick={() => this.onClickBtn("바위")}
>
바위
</button>
</>
);
}
코드를 보면 onClick 안에 () => 를 똑 떼서 onClickBtn 함수의 (choice) => 옆에 붙여준 형태이다.
물론 함수형 컴포넌트라면 이래도 함수는 재생성 되고 useCallback 을 사용해서 최적화를 해야한다.
onClickBtn = (choice) => () => {
...
};
render() {
const { result, score, imgCoord } = this.state;
return (
<>
<div>
<button
id="rock"
className="btn"
onClick={this.onClickBtn("바위")}
>
바위
</button>
</>
);
}
자주쓰는 변수 상수객체로 빼주기
자주쓰는 숫자, 문자열은 하드코딩하지말고 다음처럼 상수로 빼주자.
const rspCoords = {
바위: '0',
가위: '-142px',
보: '-284px',
};
const scores = {
가위: 1,
바위: 0,
보: -1,
};
useEffect
useEffect 에 대해서 다시한번 정리해보자.
useEffect 도 componentDidMount 처럼 한번 딱 실행 된다. 이후의 componentDidUpdate 는 deps 에 따라 결정이 되는데 , deps 안에 state 가 변경될때마다 useEffect가 재 실행되는 것이다. 이때 재실행 되기 전에 componentWillUnmount 처럼 clearInterval 이 실행되게 된다.
useEffect(() => { // componentDidMount, componentDidUpdate 역할(1대1 대응은 아님)
console.log('다시 실행');
interval.current = setInterval(changeHand, 100);
return () => { // componentWillUnmount 역할
console.log('종료');
clearInterval(interval.current);
}
}, [imgCoord]);
useEffect 와 componentDidMount 비교
componentDidMount() {
this.setState({
imgCoord: 3,
score: 1,
result: 2,
})
}
useEffect(() => {
setImgCoord();
setScore();
setResult();
}, []);
useLayoutEffect
화면이 리사이징 될때 실행되는 useEffect라고 생각하자.
useInterval hooks
useInterval 커스텀 훅을 사용할 수 있다.
코드는 다음과 같다.
import { useRef, useEffect } from "react";
function useInterval(callback, delay) {
const savedCallback = useRef();
useEffect(() => {
savedCallback.current = callback;
});
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
return savedCallback.current;
}
export default useInterval;
수정 전
const RSP = () => {
...
const interval = useRef();
useEffect(() => {
// componentDidMount, componentDidUpdate 역할(1대1 대응은 아님)
console.log("다시 실행");
interval.current = setInterval(changeHand, 100);
return () => {
// componentWillUnmount 역할
console.log("종료");
clearInterval(interval.current);
};
}, [imgCoord]);
const changeHand = () => {
if (imgCoord === rspCoords.바위) {
setImgCoord(rspCoords.가위);
} else if (imgCoord === rspCoords.가위) {
setImgCoord(rspCoords.보);
} else if (imgCoord === rspCoords.보) {
setImgCoord(rspCoords.바위);
}
};
const onClickBtn = (choice) => () => {
if (interval.current) {
clearInterval(interval.current);
interval.current = null;
const myScore = scores[choice];
const cpuScore = scores[computerChoice(imgCoord)];
const diff = myScore - cpuScore;
if (diff === 0) {
setResult("비겼습니다!");
} else if ([-1, 2].includes(diff)) {
setResult("이겼습니다!");
setScore((prevScore) => prevScore + 1);
} else {
setResult("졌습니다!");
setScore((prevScore) => prevScore - 1);
}
setTimeout(() => {
interval.current = setInterval(changeHand, 100);
}, 1000);
}
};
...
};
export default RSP;수정 후
코드가 꽤 줄어들었습니다. 수정전에는 useEffect의 deps imgCoord 를 통해서 업데이트를 하였다면, useInterval 훅은 isRunning 이라는 state 를 사용하여 삼항연산자를 통해 null 일때, delay 를 주었을때로 분기처리를 하는 것이 인상적이였습니다.
쉽게 생각하면 isRunning 이라는 state를 하나 생성해서 setInterval 을 컨트롤 한다고 생각하는 편이 좋을 것 같습니다.
const RSP = () => {
...
const [isRunning, setIsRunning] = useState(true);
const changeHand = () => {
if (imgCoord === rspCoords.바위) {
setImgCoord(rspCoords.가위);
} else if (imgCoord === rspCoords.가위) {
setImgCoord(rspCoords.보);
} else if (imgCoord === rspCoords.보) {
setImgCoord(rspCoords.바위);
}
};
useInterval(changeHand, isRunning ? 100 : null);
const onClickBtn = (choice) => () => {
if (isRunning) {
setIsRunning(false);
const myScore = scores[choice];
const cpuScore = scores[computerChoice(imgCoord)];
const diff = myScore - cpuScore;
if (diff === 0) {
setResult("비겼습니다!");
} else if ([-1, 2].includes(diff)) {
setResult("이겼습니다!");
setScore((prevScore) => prevScore + 1);
} else {
setResult("졌습니다!");
setScore((prevScore) => prevScore - 1);
}
setTimeout(() => {
setIsRunning(true);
}, 1000);
}
};
...
};