Components

간단한 테트리스 게임을 구현하기 위해 필요한 컴포넌트 정리

1️⃣ Tetris

Tetris 컴포넌트는 테트리스 게임 요소들을 조립하여 완성되는 컴포넌트이다.

아래에 소개할 컴포넌트들이 Tetris 컴포넌트에 속하게 되며,

게임 진행에 필요한 전반적인 이벤트들도 이곳에 구현한다.

2️⃣ Stage

Stage 컴포넌트는 테트리스 게임이 진행되는 게임판이다.

Cell들이 모여서 Stage를 만들게 되며,

게임판의 width와 height는 Tetris 컴포넌트로부터 주입받아서 사용하게 된다.

3️⃣ Cell

Stage 컴포넌트를 이루는 작은 한 칸이다.

Cell 컴포넌트는 해당 칸을 어떤 색으로 fill할지 외부로부터 주입받게 되는데,

Tetromino의 타입에 따라 다르게 fill하게 된다.

Cell의 경우 높은 확률로 어떠한 타입도 갖지 않는 빈 Cell이거나, 이미 칠해져서 변할 가능성이 적은 Cell의 상태인데

Tetromino의 움직임에 따라 전체 Cell이 리렌더링 되는 것은 낭비이므로, Reac.memo를 사용하여 컴포넌트를 감싼다.

4️⃣ Display

Display 컴포넌트는 게임의 현황을 알려주는 여러 컨텐츠들을 나타내는 컴포넌트이다.

없앤 rows에 따른 Score와 게임 Level등을 표기할 때 사용한다.

GameOver시에는 게임이 끝났음을 알리는 Display를 보여준다.

5️⃣ StartButton

게임 시작을 위한 버튼 역할을 하는 컴포넌트이다.