앞에서 만든 영단어장에 "뜻 보기" 버튼과 체크박스 버튼으로 기능을 추가한다.

• 뜻 보기 버튼 : 클릭 시, 뜻이 보여지며 버튼은 "뜻 숨기기"로 바뀐다.
• 체크박스 : 클릭 시, 완료했다는 뜻으로 해당 단어가 딤처리가 된다.

뜻 보기 버튼 만들기

1. 컴포넌트를 다시 분리한다.

2. 버튼과 체크박스 열 추가

<td> 태그 각각에 <button> 태그를 만든다.

 <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>{word.eng}</td>
        <td>{isShow && word.kor}</td>  
        <td>
            <button>뜻 보기</button>
            <button className="btn_del">삭제</button>
        </td>
</tr>

3. state 사용해서 뜻 보여주고 숨기기

state를 사용해서 뜻이 보여질 때의 상태와 보여지지 않을 때의 상태를 만들어야한다.

import { useState } from 'react';

export default function Word({ word }) {
    const [isShow, setIsShow] = useState(false);

    function toggleShow() {
        setIsShow(!isShow);
    }

    return <>
        <tr>
            <td>
                <input type="checkbox"} />
            </td>
            <td>{word.eng}</td>
            <td>{isShow && word.kor}</td>  
            <td>
                <button onClick={toggleShow}>뜻 { isShow ? '숨기기' : '보기' } </button>
                <button className="btn_del">삭제</button>
            </td>
        </tr>
    </>
}

const [isShow, setIsShow] = useState(false);
: state 사용, isShow의 초기 상태는 false로, 보여지지 않는 상태이다.

isShow의 불린 값을 변경하는 'toggleShow()' 함수를 만든다.

<td>{isShow && word.kor}</td>
: isShow가 true일 때만 뜻이 보여져야한다.

<button onClick={toggleShow}>뜻 { isShow ? '숨기기' : '보기' } </button>
: 뜻 보기 버튼을 클릭하면 'toggleShow()' 함수가 실행되도록 onClick으로 이벤트를 걸어준다.
뜻 "보기" "숨기기" 가 isShow에 따라 변경되어야하므로 삼항연산자로 처리. isShow가 true일 때 숨기기, false일 때 보기가 된다.

4. props 사용해서 Done 상태처리

data.json의 "isDone"을 가져와 true면 단어를 외운 상태이므로 딤처리를 하고, false이면 단어를 아직 외우지 못한 상태이다.
또한 사용자의 체크 여부에 따라 달라져야하므로 state도 사용해야한다.

Word 컴포넌트 상위 컴포넌트인 Day 컴포넌트애서 값 전달

// Day.js

import dummy from "../db/data.json"
import { useParams } from 'react-router-dom';
import Word from './Word';

export default function Day() {
    const day = useParams().day;
    const wordList = dummy.words.filter(word => (
        word.day === Number(day)
    ))
    console.log(wordList)
    return <>
        <h2>Day {day}</h2>
        <table>
            <tbody>
                {wordList.map(word => (
                    <Word word={word} key={word.id}/>    
                ))}
            </tbody>
        </table>
    </>
}

{wordList.map(word => ( <Word word={word} key={word.id}/> ))}
: Word 컴포넌트로 wordList 전달.

// Word.js

import { useState } from 'react';

export default function Word({ word }) {
    const [isShow, setIsShow] = useState(false);
    const [isDone, setIsDone] = useState(word.isDone);

    function toggleShow() {
        setIsShow(!isShow);
    }
    function toggleDone() {
        setIsDone(!isDone);
    }

    return <>
        <tr className={isDone ? 'off' : ''}>
            <td>
                <input type="checkbox" checked={isDone} onClick={toggleDone} />
            </td>
            <td>{word.eng}</td>
            <td>{isShow && word.kor}</td>  
            <td>
                <button onClick={toggleShow}>뜻 { isShow ? '숨기기' : '보기' } </button>
                <button className="btn_del">삭제</button>
            </td>
        </tr>
    </>
}

export default function Word({ word })
: word 받아오기.

const [isDone, setIsDone] = useState(word.isDone);
: state 사용. 초기값은 받아온 word(json)의 isDone 값. isDone이 true로 되어있는 tr만 딤처리 된다.

function toggleDone() { setIsDone(!isDone); }
: isDone의 상태를 바꿔주는 함수.

<input type="checkbox" checked={isDone} onClick={toggleDone} />
: 체크박스의 checked 여부는 isDone 상태에 따라 달라지고 onClick으로 toggleDone() 함수가 실행된다. 클릭하면 isDone이 true라면 false로 바뀌고 false라면 true로 바뀐다.

<tr className={isDone ? 'off' : ''}>
: isDone이 true라면 off 라는 클래스를 붙여줌으로써 한 행에 딤처리 스타일링.

---

완성