구조분해할당(비구조화할당)

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

'구조 분해 할당'이란 명칭은 어떤 것들을 복사한 이후에 변수로 '분해'해준다는 의미 때문에 붙여졌습니다. 이 과정에서 분해 대상은 수정 또는 파괴되지 않습니다.

 

비구조화할당 구문은 객체에서도, 배열에서도 사용할 수 있다.

 

 

<배열의 비구조화 할당 사용하기>

const {username, setUsername} = useState('홍길동');

=>react에서 상태를 관리하는 useState 훅을 사용한 코드이다.

배열 비구조화 할당을 사용하여, 반환된 두 개의 값을 변수 username과 setUsername에 할당하고 있습니다.

username은 상태 변수의 이름으로, 현재의 상태 값을 저장하고 나중에 변경될 수 있다. 현재 코드에서는 useState를 이용하여 username이라는 상태 변수를 '홍길동'으로 초기화한다. 

setUsername은 상태를 업데이트하는 함수로, 이 함수를 호출하면 해당 상태를 새 값으로 업데이트 할 수 있는데, 

<button onClick={() => setUsername('이순신')}>이름 변경</button>

이렇게 버튼을 클릭할 때 함수를 호출해서 새 값으로 업데이트할 수도 있고,

const onClick = () => {
	setUsername('이순신');
    };
    
    return (
    	<div>
    		<button onClick={onClick}>이름변경</button>
        </div>
        );

이렇게 onClick 이벤트 핸들러를 변수로 정의하여 더 깔끔하고 가독성 높은 코드로 구현한 후, 업데이트할 수도 있다.