[react] 구조 분해 할당

구조 분해 할당은 mdn에서는 배열 또는 객체의 속성을 해체하여 그 값을 개별 변수에 담을수 있게 하는 javascript 표현식 이라고 한다

쉽게 예를 들어서 설명하면,
아래의 코드 처럼 간단하게 바꿔 사용할수 있다.

1방법

let a, b
a = 10;
b = 20;

이렇게 해서 a에 10을 할당하고, b에 20을 할당 할 수 있지만,
구조 분해 할당을 사용하면 아래와 같이 변경하여, 똑같은 결과값을 가질 수 있다

let a, b
[a, b] = [10, 20]

2방법

const arr = ['cho', 'seonghwan', 'choseonghwan']
let familyName = arr[0];
let givenName = arr[1];
function name() {
	console.log('성 : '+ familyName)
  	console.log('이름 : '+ givenName)
}
name()

함수를 사용할 때 원래 있던 배열 또는 객체에서 값을 가져와서 사용해야 할 경우
위에는 하나하나 맵핑을 해주었지만,
아래처럼 구조분해 할당 방식을 사용하면, 같은 인덱스의 값에 값이 들어가게 되어서 맵핑 해야 할 값이 많은 경우 훨씬 효율적인 사용이 가능하다

const arr = ['cho', 'seonghwan', 'choseonghwan']
let [familyName, givenName] = arr
function name() {
	console.log('성 : '+ familyName)
  	console.log('이름 : '+ givenName)
}
name()

3방법

const obj = { b:10, d:20 }
let a, b, c, d
({a,b,c,d} = obj)

위의 방법을 사용하면, 여러 값이 있지만 key 값이 같은 것에 대해서만 값이 맵핑된다, 반대로 생각해보면 key 값이 일치하는 곳에만 객체의 값이 전달되기 때문에 아래와 같이 코드를 작성해도 원하는 개체에만 값을 전달 할 수 있다

const obj = { b:10, d:20 , e:30, f:40}
let a, b, c, d
({a,b,c,d} = obj)

실제사용예시

handleInput = (e) => {
    const className = e.target.className;
  	const value = e.target.value;
}

위의 코드는 input 에 있는 데이터를 전달하는 코드 인데,
아래처럼 구조분해 할당을 사용하면
input 에 있는 많은 속성들(e.target."속성")들 중에 key 값이 일치하는 데이터를 맵핑해주기 때문에 더 간단한 코드를 구성 할 수 있다

handleInput = (e) => {
    const { className, value } = e.target;
}