TIL - Javascript

모든 코드에 의미를 담겠습니다.

비구조화 할당(Destructuring Assignment)

Javascript ES6문법부터 나온 문법이다. 객체나 배열의 속성을 해체하여서 개별 변수에 값을 담는 구조를 일컷는 말이다.

이렇게 정의를 해놓으면 무슨말인지 이해가잘안간다...

예를 들어보자

기본 객체구조
const Child = { 
  	name: "문태웅",
  	age: 16,
  	country: "미국"
}

Child라는 기본 객체가 정의되어있는데 여기서 만약 각 key들의 value들을 바꾸고 싶다면 어떻게 해야할까??

Child.name = "문태링"
Child.age = 15

이런 형태로 바꾸는게 객체 기본구조를 따르는 것이다.

하지만!! 우리가 React문법을 많이 쓰다보면 비구조화 할당 문법을 굉장히 많이 보게된다.

처음부터 Child 객체안의 key들을 변수로 사용하여서 손쉽게 쓸 수 있는 구조를 비구조화 할당을 통해서 할 수 있다.

const {name, age, country} = Child

console.log(name) // 문태웅
console.log(age) // 16
console.log(country) //미국

이렇게 쉽게 나타낼 수 있다. 객체는 {}로 묶어서 표현할 수 있다!!!

배열은 어떨까?

function test(name1, name2){
	return[
      	name1,
      	name2
      ]
}

test("맹구", "훈이")

const [child1, child2] = test()

console.log(child1) // 맹구
console.log(child2) // 훈이

객체와 배열의 다른점은 []로 변수를 선언한다는 점과 배열안에 변수이름을 원하는대로 지정이 가능하다는 점이다.

그래서 React에서 useState함수가 배열을 이용해서 값을 받아오는 구조인것이다. 조금 더 자세하게 뜯어보자면

const[package, setPackage] = useState()

function useState() {
	return [
      package,
      setPackage()
      ]
}
이런 구조를 띄는 것 같다.
package는 변수, 숫자, 객체, 배열등을 if문으로 받아내서 값을 return하는 구조인 것 같고 (더 자세하고 알고싶다면 React MDN문서를 참조)

setPackage()는 함수를 이용하여 package변수를 고치는 것 같다                                                        

그렇다면 마지막으로 객체가 여러개 있는 경우는 어떻게 대처를 하면 좋을까????

const TaewoongMoon = () => {
	name: "Taewoong Moon",
    age: {young: 15, old: 30},
    country: {young: South Korea, old: United States}
}

const {name, age{young}, country{old}} = TaewoongMoon()

이렇게 해주면 원하는 값을 찾을 수가 있다!!!