[JS] 구조분해할당 (Destructuring Assignment) & State로 여러 Input 관리

Destructuring Assignment

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
MDN 구조분해할당

// MDN 구조분해할당 구문

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

객체에서 구조분해할당
객체에서는 순서가 없기에 key값의 이름이 중요해서 key값의 이름을 잘 작성해야해요

const protagonist = {
	name : '짱구',
    age : 5,
    school : '떡잎 유치원'
};

let {name , age} = protagonist

console.log(name) // 짱구
console.log(age) // 5

배열에서 구조분해할당
배열에서는 순서가 있고 key값이 없기에 순서를 잘 맞춰주셔야해여

const classmate = ['철수','훈이','짱구','유리'];

let [a , b] = classmate
console.log(a) // 철수
console.log(b) // 훈이

useQuery 구조 이해하기!!

const useQuery = (dataKind) => {
    // dataKind API 요청하기
    
    return {
        data : {
            fetchBoard: {
                writer : "철수"
            }
        },
        refetch : () => {
            console.log("리페치가 실행됩니다!!")
        },
    }
}

const {data , refetch} = useQuery("FETCH_BOARD")

data.fetchBoard.writer
// "철수"
refetch()
// "리페치가 실행됩니다!!"

useState 구조 이해하기!!

const useState = (state) => {
	const myState = state
	
	const mySetState = () => {
		console.log("state를 변경합니다!!!")
	}
	return [myState, mySetState]
}

const [count, setCount] = useSTate(0)

count
// 0
setCount()
// state를 변경합니다!!!

---

State로 Inputs 관리

    
const [Inputs, setInput] = useState({
    InputEmail : '',
    InputPassword : ''
}) 

useState로 Inputs라는 상태값을 객체로 저장을 한 후에 이걸 구조분해 할당으로 키값만 들고 다시 재저장을 할거에요

const { InputEmail , InputPassword } = Inputs; 

Inputs에 키값을 구조분해할당으로 재정의 후 어디서든 편하게 값을 전달 할 수 있어요

const onChangeInput = (event) => {
    const { value, name } = event.target;
    // event 타겟의 value와 , name을 구조분해 할당으로 저장
    setInput({
        ...Inputs,
        [name] : value
    });
    
    if(name === 'InputEmail'){
		//이벤트가 이메일 일떄 작동
    }
    if(name === 'InputPassword'){
		//이벤트가 패스워드 일떄 작동
    }
};

마찬가지로 eventTarget도 구조분해 할당으로 재정의후
setInput에 전달 해야할 값 [name] : value을 저장을 하는데
전에 저장했던 값들이 지워지지않게 Inputs의 값들을 스프레드 구문으로 재할당 해주었어요

제가 직접 실습 하고 Next.js 구조에 대입해서 리펙토링을 해봤어요
https://kimdongeun12.github.io/blog-posting/destructuring/
아래 코드는 위 주소의 코드입니다.

import {useState} from 'react'
import styled from '@emotion/styled'
import { prefix } from '../../config/config';

export default function inputPage() {
    const imgPrefix = prefix;
    
    const RegEmailCheck = (value) => {
        // 이메일 체크 함수
        const EmailRegExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

        if(value.match(EmailRegExp) === null){
            setEmailMessage('이메일 주소를 다시 확인해주세요.')
        }else{
            setEmailMessage('')
        }
    }
    
    const RegPasswordCheck = (value) => {
        // 패스워드 체크 함수
        const PasswordRegExp = /([^ㄱ-ㅎㅏ-ㅣ가-힣]).{8,16}$/;

        if(value.match(PasswordRegExp) === null){
            setPasswordMessage('8-16자의 영문,숫자,특수 문자만 사용 가능합니다.')
        }else{
            setPasswordMessage('')
        }
    }

    const [Inputs, setInput] = useState({
        InputEmail : '',
        InputPassword : ''
    }) 
    // InputsState를 객체로 관리

    const [EmailMessage, setEmailMessage] = useState('');
    const [PasswordMessage, setPasswordMessage] = useState('');

    const { InputEmail , InputPassword } = Inputs; 
    // 객체로 관리한 key값을 구조 분해 할당으로 꺼내기
    
    const onChangeInput = (event) => {
        const { value, name } = event.target;
        // event 타겟의 value와 , name을 구조 분해 할당으로 저장
        setInput({
            ...Inputs,
            [name] : value
        });
        
        if(name === 'InputEmail'){
            RegEmailCheck(value)
        }
        if(name === 'InputPassword'){
            RegPasswordCheck(value)
        }
    };

    const onClickClear = (event) => {
        const { name } = event.target.previousSibling;
        // event 타겟의 input의 name을 구조 분해 할당으로 저장
        setInput({
            ...Inputs,
            [name] : ''
        });
    };
    
    

    return (
        <>
            <Wrapper imgPrefix={imgPrefix}>
                <LogoWrap>
                    <Logo imgPrefix={imgPrefix}>잇츠로드</Logo>
                </LogoWrap>
                <InputBox>
                    <InputWrap>
                        <Input type="text" name='InputEmail' 
                        onChange={onChangeInput}
                        value={InputEmail}
                        />
                        <ClearBtn imgPrefix={imgPrefix} onClick={onClickClear}>지우기</ClearBtn>
                    </InputWrap>
                    <Error>{EmailMessage}</Error>
                </InputBox>
                <InputBox>
                    <InputWrap>
                        <Input type="password" name='InputPassword' 
                        onChange={onChangeInput}
                        value={InputPassword}
                        />
                        <ClearBtn imgPrefix={imgPrefix} onClick={onClickClear}>지우기</ClearBtn>
                    </InputWrap>
                    <Error>{PasswordMessage}</Error>
                </InputBox>
                <ButtonWrap>
                    <LoginButton onClick={onClickLogin}>로그인</LoginButton>
                </ButtonWrap>
                <LinkWrap>
                    <Link href=''>이메일 찾기</Link>
                    <Link href=''>비밀번호 찾기</Link>
                    <Link href=''>회원가입</Link>
                </LinkWrap>
                <ButtonWrap>
                    <KaKaoButton imgPrefix={imgPrefix}>카카오톡으로 로그인</KaKaoButton>
                </ButtonWrap>
            </Wrapper>
        </>
    )
}