이 글은 강좌가 아닙니다. 부족한 부분이 있더라도, 너그럽게 봐주신다면 감사하겠습니다. 피드백 언제나 환영입니다 :)
src/containers
에 BingoBoard.tsx 파일을 만들어요.
우선, 필요한 타입들부터 정의해줘요.
// 빙고 개수
interface CountProps {
count: number;
}
// 빙고 아이템
interface Square {
contents: string,
checked: boolean
}
그리고, 빙고판을 그리기 위한 설계를 해줍시다.
const [count, setCount] = useState<number>(5); // n×n 빙고의 n역할, 초기값을 5로 설정
let matrix = [];
for (let i = 0; i < count; i++) {
matrix[i] = new Array(count).fill({ contents: "", checked: false });
}
이러면 5×5 크기의 빙고 뼈대가 완성이 되었네요. 자, 뼈대를 만들었으니, 살을 한번 붙여볼게요.
const Wrapper = styled("div")`
display: flex;
flex-basis: content;
position: relative;
align-items: center;
`
const Board = styled("div") <CountProps>`
display: grid;
grid-template-columns: repeat(${props => props.count}, 5rem);
grid-template-rows: repeat(${props => props.count}, 5rem);
grid-gap: 5px;
`
return (
<Wrapper>
<Board count={count}>
{matrix.map((row: Square[], rowNumber: number) =>
row.map((el: Square, columnNumber: number) => {
return <BingoItem rowNumber={rowNumber} columnNumber={columnNumber} />
})
)}
</Board>
</Wrapper>
);
위 코드를 보시면, BingoItem
컴포넌트로 rowNumber, columnNumber을 넘기는데 이 값들은 나중에 아이템을 클릭하는데 활용될거에요.
이 코드를 짜면서 row, column 두개가 너무 헷갈렸네요.
이번 글에서 BingoItem
을 완성할건 아니지만, 결과물을 보기위해 간단히 만들어볼게요.
src/components
에 BingoItem.tsx
파일을 만들어주세요.
interface Props {
rowNumber: number;
columnNumber: number;
}
const BingoItem = ({ rowNumber, columnNumber }: Props) => {
const Item = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background-color: #fff;
font-size: 2rem;
`
return (
<Item>😍</Item>
);
};
글을 쓰기 위해 코드를 보니 이 파일에서는 interface가 아니라 type으로 Props가 정의되어있었어요. 다음번에는 interface와 type의 차이에 공부해서 알려드리도록 할게요.
자, 그럼 결과물을 한번 볼까요?
자, 그럼 결과물을 한번 볼까요?
5×5 크기의 빙고가 완성되었어요! ~css때문에 고생한건 비밀...~
다음 글에서는 BingoItem을 더 예쁘게 만들어볼거에요. 미적감각이 없어서 힘들거 같긴한데.. 노력해보도록 할게요.
모든 코드와 진행과정은 https://github.com/mango906/EmojiBingo 에서 확인 가능합니다.