[TS][JS] 객체 비 구조화 할당 (destructuring assignment)

객체 비 구조화 할당( 구조 분해 할당 ) 이란?

자바스크립트에서는 객체의 구조분해 할당을 통해 더 가독성이 좋은 코드를 만들 수 있습니다.

이 편리함과 가독성이 좋은 코드라는 의미는 코드를 보며 이해하겠습니다.

 

const user = {
	name:"kim",
    age:25,
    gender:"Male",
    university:"Seoul Unv",
    introduce:"hello my name is kim",
}

위와 같은 객체가 있다고 가정할 때, 값들을 비구조화 할당하지 않은채 추출하겠습니다.

const user = {
	name:"kim",
    age:25,
    gender:"Male",
    university:"Seoul Unv",
    introduce:"hello my name is kim",
}

console.log(user.name) // kim
console.log(user.age) // 25
console.log(user.gender) // Male
console.log(user.university) // Seoul Unv
console.log(user.introduce) // hello my name is kim

물론 이렇게 봤을때는 가독성이 좋아보일 수 있지만, 코드가 깊어진다면 해석하기 힘들 수 있습니다.

그리고 앞에 user 계속 붙이기 껄끄럽습니다.

const user = {
	name:"kim",
    age:25,
    gender:"Male",
    university:"Seoul Unv",
    introduce:"hello my name is kim",
}

const { name, age, gender, university, introduce } = user

console.log(name) // kim
console.log(age) // 25
console.log(gender) // Male
console.log(university) // Seoul Unv
console.log(introduce) // hello my name is kim

조금 다른형태지만 중간에 비구조화 할당이 들어간 모습입니다.

조금 더 가독성이 좋아진 것 같습니다.

console.log에 user를 비구조화 할당을 통해 제거할 수 있었습니다.

React에서의 비구조화 할당

조금 더 나아가서 제가 짠 코드들중 일부입니다.

interface writeDataInterface {
    title: string,
    writer: string,
    writePassword: string,
    content: string,
}

const [writeData, setWriteData] = useState<writeDataInterface>({
        title: '',
        writer: '',
        writePassword: '',
        content: '',
    })
    
const postWriteData = (writeData:writeDataInterface) => {
        const { title, writer, writePassword, content } = writeData
        console.log(title, writer, writePassword, content)
    }

const inputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setWriteData(prevState => ({
            ...prevState,
            [name]: value
        }));
    }

/* 가독성을 위해 중간에 생략된 코드들이 존재합니다. */

간단히 설명하자면, inputChange함수에서 writeData의 state를 변경해줍니다.

이 변경된 state는 interface를 상속받아 객체로 표현됩니다.

이 객체를 postWriteData에 주입시킵니다.

그리고 비구조화 할당을 통해 console.log로 찍어내주고 있습니다.

비구조화 할당을 통해 조금 더 가독성이 좋아진 모습을 확인 할 수 있습니다.