Wordle Clone Project 2일차

PROLCY·2022년 10월 16일

React

Wordle-Clone-Project

목록 보기

2/15

오늘은 10월 16일 2일차이다.

목표

키보드 눌렀을 시 각 칸에 차례대로 해당하는 문자가 입력되는 기능 구현
디자인 2차 작업

진행

먼저 컴포넌트들 정리를 좀 했다. Keyboard, KeyLine, Key로 구성되어 있던 키보드 부분을 KeyLine을 KeyBoard에 병합함으로써 2개로 줄였다. WordList, Word, Letter로 구성되어 있는 단어 보드 부분도 프로젝트 진행하면서 줄여야겠다.

상태 관리를 어떻게 할 지를 가장 오랫동안 고민했던 것 같다. 원래 이 프로젝트 시작하기 전에 React의 상태 관리 방법들 중 Hooks, Context API, Redux 이 세 가지를 각각 사용하여 세 개의 프로젝트를 만들려고 계획했었다. 시간이 될 지는 모르겠지만 아직은 이 계획이 유효하기 때문에, 우선 이번에는 가장 기초적인 Hooks를 사용하여 상태 관리를 해보았다.

코드

let listIndex = 0;

const Board = () => {

    const wordMaxLen = 5;
    const [word, setWord] = useState('');
    const [wordList, setWordList] = useState([]);

    const onClick = e => {
        if ( e.target.innerText === 'ENTER')
        {
            if ( word.length < wordMaxLen )
            {
                alert("단어가 짧습니다!");
                return;
            }
            setWordList(wordList.concat(word));
            listIndex++;
            console.log(listIndex);
            setWord('');
            return;
        }
        if ( word.length > wordMaxLen )
            return;
        setWord(word.concat(e.target.innerText));
        console.log(word);
    };

    
    return (
        <BoardContainer>
            <BoardBlock>
                <WordList word={word} wordList={wordList} listIndex={listIndex}/>
            </BoardBlock>
            <Keyboard onClick={onClick}/>
        </BoardContainer>
    );
};

키보드와 단어 보드를 가지고 있는 Board 컴포넌트 코드이다. 지금 보니 변수명들을 좀 더 명확하게 짓고, 주석을 작성해야 겠다는 생각이 든다.
word 상태는 현재 입력하고 있는 단어를 의미하는 문자열이고, wordList 상태는 지금까지 입력했던 단어들을 담는 배열이다.
onClick 함수를 Keyboard 컴포넌트를 거쳐 Key 컴포넌트에 주면 거기서 onClick 이벤트에 연결하여 ENTER키를 눌렀다면 단어 길이 검사 후 wordList에 방금 입력했던 단어를 추가하고 word를 빈 문자열로 만들어 준다. ENTER 키가 아니라면 단어 길이 검사 후 word에 입력한 문자를 추가해 준다.

const WordList = props => {
    const listIndex = props.listIndex;
    const wordList = props.wordList;
    const RenderWord = index => {
        if (wordList.length > index )
            return wordList[index];
        if (listIndex === index)
            return props.word;
        else
            return null;
    }
    return (
        <WordListBlock>
            <Word word={RenderWord(0)}/>
            <Word word={RenderWord(1)}/>
            <Word word={RenderWord(2)}/>
            <Word word={RenderWord(3)}/>
            <Word word={RenderWord(4)}/>
            <Word word={RenderWord(5)}/>
        </WordListBlock>
    );
};

WordList 컴포넌트이다. props에서 받아온 listIndex와 wordList를 기반으로 어떤 단어를 렌더링할지 정하는 RenderWord를 정의했다. 컴포넌트를 렌더링하는 부분은 나중에 map 함수를 이용하여 간단하게 해줘야겠다.

const Word = props => {
    const RenderLetter = index => {
        if ( props.word === null ) {
            return null;
        }
        const wordLen=props.word.length;
        if ( index >=  wordLen )
            return null;
        else   
            return props.word[index];
    }
    return (
        <WordBlock>
            <Letter letter={RenderLetter(0)}/>
            <Letter letter={RenderLetter(1)}/>
            <Letter letter={RenderLetter(2)}/>
            <Letter letter={RenderLetter(3)}/>
            <Letter letter={RenderLetter(4)}/>
        </WordBlock>
    );
};