✏️ 무엇을 배웠나
next.js 공부하기 전에 추가 공부 겸 리액트 문서를 읽었다.
1. 프롭스 끌어올리기
리액트 문서에서 제공하는 튜토리얼을 보며 틱택토 게임을 만들어봤다.
리액트의 기본적인 개념을 가지고 진행했기 때문에 난이도는 어렵지 않았지만, 튜토리얼에서 기본 개념들을 활용하는 방식을 볼 수 있었다.
컴포넌트가 추가되고 로직이 추가되면서 데이터의 흐름이 바뀌었는데, 그 데이터가 막힘없이 흐르게 하기 위해서 상태들을 최상단 컴포넌트로 올려버리고 상태를 프롭스로 내려줬다. 리액트의 데이터 흐름은 최상단에서 아래로 흐르는 단방향 데이터 구조라는 것을 명료하게 알 수 있었다. 사실 너무나도 기본적인 얘기지만, 프로젝트 할 때 데이터 흐름을 파악하는 데 혼란했던 기억들이 있기 때문에 이 내용이 많이 도움이 됐다.
2. History 기능 구현 로직
게임이 한 턴 진행될 때마다 게임 내역이 쌓이고 원한다면 복기할 수 있는 버튼이 있다. 문서에서는 Time Travel이라고 표현하고 있는데, 앱의 상태를 스냅샷으로 보관할 수 있다는 점에서 알아두면 좋은 로직이었다.
const [history, setHistory] = useState([Array(9).fill(null)]);위 상태가 틱택토 보드의 상태를 배열로 담고 있는데, 게임이 진행되면서
const nexSquares = squares.slice();
const nextHistory = [...history.slice(0, currentMove + 1), nexSquares];
setHistory(nextHistory);nexSquares에 history 복제본을 할당한 뒤
nextHistory에 스프레드 문법을 이용해 현재 턴의 보드 history를 직전 보드 history에 추가하는 로직이다.
결과적으로는 아래 이미지처럼 한 턴의 보드 상태를 나타내는 history가 담긴 이중배열의 구조로 history의 상태가 업데이트된다.
여러 라이브러리와 프레임워크를 배우면서 드는 생각인데, 결국 기본적인 내용을 가지고 응용해서 뭔가를 만들어내는 건데, 그게 너무 재밌는 일인 것 같다. 사람들 참 똑똑해. 여튼 이 로직을 가지고 다른 프로젝트에서 써먹을 수 있을 것 같아 기록해둔다.
3. UI 보고 데이터 흐름 짜기
리액트 문서 중 thinking in react 파트에서 UI 목업을 보고 어떤 계층으로 리액트 코드를 구성해야 하는지 조언을 확인할 수 있었다.
리액트 데이터 흐름의 구조가 최상단에서 아래로 흐르는 것을 기억할 때, 설계 단계에서 UI 요소들을 계층화해 놓으면 작업하기 편할 것 같다는 생각을 했다.
- 요소 1
- 요소 1.1
- 요소 1.2. - 요소 2
- 요소 2.1 - 요소 3
다음 프로젝트 할 때는 설계 단계에서부터 UI 요소를 계층화시켜 놓고 시작해봐야겠다.
4. 어떤 걸 상태로 만들어야 하고, 상태는 어디에 두는 게 좋을까
마찬가지로 thinking in react 문서에서 확인한 내용인데 설계 단계에서 도움이 될 것 같아 기록해둔다.
상태로 만들기 절적한 것
- 유저의 액션 또는 시간에 따라 값이 변하는 것
- 원본 데이터에서 계산할 수 없는 것
핵심 : 상태를 만들지 않고도 해결할 수 있는 거면, 상태로 만들지 마라.
상태를 두기 적절한 곳
- 해당 상태를 사용하는 자식들의 공통 부모
사실 이것도 당연한 얘기지만, 프로젝트 할 때는 코드 짜느라 미리 이런 걸 염두에 두고 고려하는 시간을 갖지 못했다. 다음 번에는 설계 단계에서 데이터 흐름을 분충히 살펴보자.
🏷️ 오늘의 코멘트
리액트 이해도가 + 10 상승했다 ! 그리고 리액트 문서를 읽으면서 느낀 점은 코드 짜기 전에 의식적으로도 충분히 생각하는 습관을 길러야 겠다는 것. 어느 분야는 무지성으로 하는 건 좋은 습관이 아닐 테지만, 리액트처럼 단방향 데이터 구조를 가지고 있을 때는 더욱 중요한 습관 같다.
