프로그램이 이전에 던진 정수를 화면에 나타내어 쌓아볼 수 있을까?
이 추측 히스토리(?)를 배열 형태로 만들고, 상태 관리를 해보자.
const [rounds, setRounds] = useState([initialGuess]) // 배열에 최초 정수 하나로 시작
참고로 initialGuess를 설정하는 방법은 바로 이전 글에 메모해두었다.
이 상태를 유저가 up, down 버튼을 눌렀을 때, 즉 nextGuessHandler가 동작할 때마다 추가되도록 설정해준다.
const nextGuessHandler = () => {
// 중략
const newRandomNum = generatFeNumBetween(
minBoundary,
maxBoundary,
currentGuess
);
setCurrentGuess(newRandomNum);
setRounds((prevRound) => [newRandomNum, ...prevRound]);
};
다시 말해 initialGuess가 50이라고 가정하고, 차례로 5, 12, 80, 40 이라는 랜덤 정수가 생성됐다면 배열은 아래처럼 변한다.
- [50]
- [5, 50]
- [12, 5, 50]
- [80, 12, 5, 50]
- [40, 80, 12, 5, 50]
막연히 unshift 메소드를 사용하려 시도했는데, 오히려 스프레드 연산자를 사용하는 편이 직관적이어 보인다.
+
아래처럼 순서를 바꾼다면 배열의 맨 뒤에 추가되도록 만들 수도 있다.
setRounds((prevRound) => [...prevRound], newRandomNum]);
이제 화면에 배열이 업데이트될 때마다 추가되도록 작성한다.
<View>
{rounds.map(rounds => <Text key={rounds}>{rounds}</Text>)}
</View>