React(37) 리액트 훅 - 토글버튼 + 체크박스 구현하기

리액트 훅으로 영단어 프로그램을 구현하는 중이다. 

오늘 실습해볼 내용들은 토글 버튼과 체크박스를 구현하는 것이다. 

토글 기능으로 '뜻보기' 라는 버튼을 누르면 단어의 뜻이 나오고, '뜻숨기기' 라는 버튼을 누르면 단어가 감춰진다.

또한 체크박스 기능으로 다 외운 영단어를 체크박스에 표시하면 그 단어가 비활성화 된다.

 

 

스포일러

1. 토글버튼 구현 

'뜻 보기' 버튼을 누르면 pencil 의 뜻인 '연필' 이 나오고  '뜻 숨기기' 버튼을 누르면 뜻이 감춰진다.

 

2. 체크박스 구현 

외운 단어에 체크하면 단어가 비활성화 된다.

 

**토글이란 

하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태 밖에 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

 

---

React(37) 리액트 훅 - 토글버튼 + 체크박스 구현하기

 

Day.js

Day 컴포넌트(부모) 안에 Word 컴포넌트(자식)이 들어가 있다. Word.js 에는 토글, 체크박스 기능이 들어가 있다.

Day는 props 로 wordList의 객체원소인 word를 물려준다.

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

export default function Day() {
  const { day } = useParams()                // useParams 에 찍힌 숫자를 day 로 변수 지정한다.
  					     // url에 https://____/1 로 찍히면 useParams 으로 1을 읽어온다.
  const wordList = dummy.words.filter(word => (
    word.day === Number(day)		     // 위의 {day} 값이 wordList 여기로 들어간다.
  ))
  return (
    <div>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {wordList.map((word) => (	      // wordList의 데이터를 가져와 map()로 뿌려준다.
            <Word word={word} key={word.id}/> // Word 컴포넌트에 props로 word와 word.id를 넣어준다.
          ))}
        </tbody>
      </table>
    </div>
  );
}

 

Word.js

부모님(Day.js)에게 단어가 들어있는 객체데이터를 물려받았다. 맘껏 탕진해보자.

import { useState } from "react"

export default function Word({ word }) {	    // props 로 물려받은 객체를 word라고 부르자
  const [isShow, setIsShow] = useState(false) 	    // 토글 스위치를 키는 역할 (기본값은 false)
  const [isDone, setIsDone] = useState(word.isDone) // 토글 스위치를 끄는 역할
						    // (기본값은 props로 받아온 word객체의 isDone값과 동일)
  function toggleShow() {
    setIsShow(!isShow)  			    // isShow 가 true면 false, false면 true가 된다.
  }

  function toggleDone() {
    setIsDone(!isDone); 			    // isShow 가 true면 false, false면 true가 된다.
  }

  return (
    <tr className={isDone ? "off" : ""}> 	    // 선택문으로 isDone 이 true면 off가 된다. 
      <td>
        <input type="checkbox" checked={isDone} onChange={toggleDone} />
      </td>
      <td>{word.eng}</td>
      <td>{isShow && word.kor}</td> 	    	    // isShow true 일때만 보인다.
      <td>
        <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
        <button className="btn_del">삭제</button>
      </td>
    </tr>
  );
}

 

 

---

MORE DETAILS 

 

 

toggleShow()

1. 뜻보기를 누르면 onClick 이벤트가 실행되며 toggleShow() 가 실행된다.

 

2. isShow = true 가 되면서 아래 코드가 실행된다. 일단 숨겨진 단어가 보이게 된다.

<td>{isShow && word.kor}</td>

 

3. 동시에 isShow 가 true 일 때는 '뜻 숨기기' 가 , false 일때는 '뜻 보기' 버튼이 된다.

<button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>

 

toggleDone() 

1. 체크박스를 누르면, onChange 이벤트가 변경을 감지하여 toggleDone() 이 실행된다.

 

2. isDone = true 가 되면서 className이 3중 의문문을 통해 off가 되며 css의 색상이 변경된다.

 <input type="checkbox" checked={isDone} onChange={toggleDone} />

 

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists