Wordle Clone Project 9일차

PROLCY·2022년 10월 23일

React

Wordle-Clone-Project

목록 보기

8/15

오늘은 10월 23일 9일차이다.

목표

몇 번만에 맞췄는지에 따라 특정 단어 렌더링
문자 수가 부족한데 ENTER를 눌렀을 시 애니메이션 및 알림창 추가

진행

우선 두 번째 목표부터 진행했다. 문자 수가 부족하다는 것을 Board 컴포넌트에서 판단하고 하위 컴포넌트로 알려야 하는데, word 상태에 넣자니 애니메이션 구현이 복잡해졌고, 새로운 상태를 만들어서 내릴려니 코드가 깔끔해보이지가 않았다. 결국에는 후자의 방식으로 하기로 하고 새로운 wordState 상태를 만들어 Word 컴포넌트에 내려주면 거기서 판단하여 애니메이션을 실행하도록 했다. 알림창은 Message styled-component를 만들고, message 상태를 만들어 이 상태가 null일 때는 display 속성을 none으로 주고, 문자열이 들어 있다면 display 속성을 inline-block(글자 길이에 따라 자동으로 width 조절을 위해 inline-block으로 함)을 줬다. 적절히 setTimeout 함수를 사용하여 렌더링했다가 사라지는 방식으로 했다.
첫 번재 목표는 기존에 let 변수로 했을 때는 안됐었는데, useState를 통해 만든 message 상태로는 렌더링이 잘됐다. 그래서 새롭게 구성하였다.

코드

const Message = styled.div`
    width: auto;
    height: 40px; 
    position: absolute;
    display: ${props => props.message !== null ? 'inline-block' : 'none'};
    left: 50%;
    top: 60px;
    background-color: black;
    border-radius: 5px;
    color: white;
    padding: 2px 10px;
    text-align: center;
    line-height: 40px;
    font-size: 17px;
    font-weight: bold;
    transform: translate(-50%, 0);
`;

우선은 Message styled-component이다. props로 받은 message 상태에 따라 렌더링 여부를 결정했다. 또한 안의 내용에 따라 넓이가 변경될 수 있도록 width를 auto로, display를 inline-block으로 지정했다.

		if ( letterCorrectCounts === wordLen ) {
            isFinished = true;
            setTimeout( () => {
                setMessage(winningStatement[listIndex-1]);
                setTimeout(() => setMessage(null), 2000);
            }, 2000);
        }

Coloring Word 함수의 내부이다. 정답이라면 isFinished를 true로 바꾸고, Message를 특정 문자열로 업데이트하여 렌더링했다. 이후 2초 후에는 사라지도록 하였다.

const winningStatement = ['Genius', 'Magnificent', 
'Impressive', 'Splendid', 'Great', 'Phew'];

참고로 winningStatement는 위와 같다.

		if ( e.target.innerText === 'ENTER') {
            if ( word.length < wordMaxLen ) {
                setMessage('Not enough letters');
                setWordState('not-enough');
                setTimeout(() => {setWordState(''); setMessage(null);}, 500);
                return;
            }

            setWordList([
                ...wordList,
                ColoringWord(word, wordCorrect),
            ]);
            listIndex++;

            if ( isFinished ) {
                for ( let i = 0 ; i < wordMaxLen ; i++ )
                    word[i].state = 'all-correct';
                return;
            }

            if ( listIndex === wordListMaxLen ) {
                setTimeout( () => {
                    setMessage(wordCorrect);
                    setTimeout(() => setMessage(null), 2000);
                }, 2000);
            }
            setWord([]);
            return;
        }

onClick 함수 내부이다. word.length가 wordMaxLen보다 작으면 message 상태를 'Not enough letters로 업데이트하여 렌더링해주고, 0.5초 후 null로 업데이트하여 사라지게 한다.
만약 맞추지 못했다면, 즉 listIndex === wordListMaxLen이라면 2초 지연 후 정답을 message 상태에 업데이트해서 메시지를 렌더링하고 2초 후 사라지게 한다. 이때 2초 지연을 한 이유는 판이 돌아가는 애니메이션이 선행되어야 하기 때문이다.

정답일 시 메시지 렌더링

문자 수 부족 시 메시지 렌더링

정답을 맞히지 못했을 시 정답 메시지 렌더링(오늘 내가 틀렸던 단어들 그대로 넣어보았다.)