비구조화할당과 구조분해할당 이라는 개념은 같은 개념입니다.
예시를 보시죠
지금 하고 싶은게 프로필에 있는 네임을 뽑아서 name이라는 변수에 할당하고 싶다고 한다면 어떻게 해야할까요?
const name = profile.name이런식으로 변수를 만들고 프로필.name을 가져오면 되겠죠? 그러면 변수의 value는 철수!가 되겠습니다
자 그러면 객체의 키값을 모두 다른변수로도 저정하고 싶다면 위와 같은 방법으로 여러번 코드를 작성해줘야 합니다. 하지만 개발자는 귀찮은걸 가장 싫어 한다고.. ㅋㅋㅋ
좀더 간변하고 쉽게 하기위해서 한꺼번에 뽑아버리고 싶을때!
이런식으로 뽑아!! 버리면 됩니다.
함수를 만들어서 확인해볼수도 있어요
위에는 일반적으로 user의 게시판 정보를 뽑아 오기위해서 사용하는 함수입니다.
함수를 살펴보면 인자값에 실제로 보드조회하는 쿼리를 넣어주고 받아온 값들을 키와 벨류 형식인 객체로 가져옵니다.
실행하면 키값 벨류값이 들어 있는 객체를 확인할수 있습니다.
여기서 구조분해 할당을 해보죠~~
보시면 function useQuery(aaa) 안에 있는 객체가 리턴되어서 할당이 되고 있습니다.
function useQuery(aaa) 자 여기서 중괄호로 받아야 하는 이유는 단순하게 받아올 값들이 객체라서! 입니다.
자 그려면 배열도 한번 보시고 넘어가죠잉~~
철수를 변수에 넣고 싶으면 어떻게 해야할까요?
영희 훈히도 한꺼번에 넣고 싶습니다 ~ 역시 개발자는 귀찮은건 싫어해요 ㅋㅋ
철수는 이미 child1 에 들어가 있고 그럼 나머지 영희 훈희 만 넣어주면되는데
child1 을 또다시 써서 넣어주지 않아도 됩니다.
살짝 ,(쉼표) 하나만 넣어주고 아래 처럼 할당을 해주면 됩니다. 위치만! 잡아주면 됩니다!
똑같이 함수로도 확인할수가 있는데 많이 다르진 않아요
지금까지의 예시로 보았을때 객체의 구조분해할당과 배열의 구조분해할당의 가장 큰 차이로는,
객체는 이름이, 배열은 순서가 중요했습니다.
따라서 배열은 순서만 맞춰준다면 이름은 어떤것을 넣어주든 상관이 없습니다.
const[aaa,setAAA]= useState() 만 생각해봐도 알 수 있는 사실입니다!
