[DAY - 72] checkbox, useEffect — 비 전공자의 Be developer

checkbox
useEffect

1) checkbox

import React, { useState } from 'react';

const dataList = [
    { id: 1, name: 'chk1', text: "연령( 만 14세 이상 ) 확인 ( 필수 )", isChk: true },
    { id: 2, name: 'chk2', text: "연독스 이용약관 ( 필수 )", isChk: false },
    { id: 3, name: 'chk3', text: "개인정보 수집 및 이용에 대한 동의 ( 필수 )", isChk: false },
    { id: 4, name: 'chk4', text: "이벤트 우대혜택 동의 안내 ( 선택 )", isChk: false },
]

const Test1 = () => {
    const [data, setData] = useState(dataList);
    const changeInput = (e) => {
        const { name, checked } = e.target
        if (name === 'all') {
            setData(data.map(item => {
                return {
                    ...item,
                    isChk: checked
                }
            }))
        } else {
            setData(data.map(item =>  item.name === name ? { ...item, isChk: checked } : item ))
        }
    }
    return (
        <div style={{ margin: 30 }}>
            <p>
                <input type="checkbox" name="all" id="" onChange={changeInput} checked={data.filter(item=>item.isChk === false).length < 1}/>
                <label htmlFor=""> 전체동의</label>
            </p>
            <hr />
            {
                data.map(item => <p key={item.id}>
                    <input type="checkbox" name={item.name} id="" checked={item.isChk} onChange={changeInput} />
                    <label htmlFor=""> {item.text}</label>
                </p>)
            }
            <hr />
        </div>
    );
};

export default Test1;

체크박스를 구현해 봤는데 전체동의를 새롭게 배웠다.

        if (name === 'all') {
            setData(data.map(item => {
                return {
                    ...item,
                    isChk: checked
                }
            }))
        } else {
            setData(data.map(item =>  item.name === name ? { ...item, isChk: checked } : item ))
        }

만약 클릭한 checkbox의 name이 all인 경우 모든 checkbox의 isChk 상태를 checked로 바꿔주고 아닐 경우 해당하는 checkbox의 isChk만 checked로 바꾸어주게 된다.

            <p>
                <input type="checkbox" name="all" id="" onChange={changeInput} checked={data.filter(item=>item.isChk === false).length < 1}/>
                <label htmlFor=""> 전체동의</label>
            </p>

그리고 모든 checkbox가 true일 경우 전체동의 박스도 checkde가 된다.

2) useEffect

useEffect 훅을 사용하면 단순히 함수 결과값을 출력하는 것 외에도 다른 효과가 가능하다.

import React from 'react';
import { useEffect } from 'react';
import { useRef } from 'react';
import { useState } from 'react';

const Test2 = () => {
    const [count, setCount] = useState(1)
    const ref1 = useRef()
    const ref2 = useRef()
    const onColor = () => {
        setCount(count + 1)
        ref1.current.style.backgroundColor = 'tan'
        ref2.current.style.backgroundColor = 'lightgray'
    }
    useEffect(() => {
        console.log("useEffect")
        ref1.current.style.backgroundColor = 'orange'
    })
    useEffect(() => {
        console.log("useLayoutEffect")
        ref2.current.style.backgroundColor = 'tomato'
    })

    return (
        <div>
            <h2>카운트 : {count}</h2>
            <h2 ref={ref1}> useEffect</h2>
            <h2 ref={ref2}> useLayoutEffect</h2>
            <button onClick={onColor}>카운트 + 컬러</button>
        </div>
    );
};

export default Test2;

버튼을 클릭할 때마다 background-color가 tan, lightgray로 바뀌어야 하지만 useEffect 때문에 바뀌는 순간이 눈에 보이지 않는다.

useEffect는 화면에 출력 된 후 실행이 되고, useLayoutEffect는 화면에 출력 전 실행이 된다.

import React from 'react';
import { useEffect } from 'react';
import { useRef } from 'react';
import { useState } from 'react';

const Test3 = () => {
    const [text, setText] = useState('')
    const textRef = useRef()

    const changeInput = e => {
        setText(e.target.value)
    }
    useEffect(()=>{
        console.log('useEffect');
        textRef.current.focus()
    },[])

    return (
        <div>
            <h2>useEffect</h2>
            <input type="text" ref={textRef} value={text} onChange={changeInput}/>
        </div>
    );
};

export default Test3;

이전 코드처럼 계속해서 effect가 발생하는 것을 막기 위해 한 번만 실행이 되도록 대괄호를 넣어줘야 한다

    useEffect(()=>{
        console.log('useEffect');
        textRef.current.focus()
    },[])

이렇게 하면 처음 한 번만 실행이 된다.

1) checkbox

2) useEffect

티스토리툴바