React JS ③

구조 분해 할당

객체 구조 분해 할당

① 배열이나 객체의 속성을 분해
② 위 순서에서 분해한 값을 각각 변수에 담아 사용할 수 있는 것

🍥 객체 구조 분해 할당 적용 X

→ 객체.속성으로 사용하는 번거로움이 보임

🍥 객체 구조 분해 할당 적용 O

• 가장 간단한 구조 분해 할당 예시 코드

→ 객체를 각각 불러올 수 있음
→ 바로 값 대입도 가능

→ 새로운 변수명으로 바꿔서 쓰는 것도 가능

🍥 배열 구조 분해 할당

• 객체 구조 분해 할당과 크게 다르지 않음
• 배열 내의 요소를 새로운 이름으로 지정해서 사용하고자 할 때 사용

• 필요없는 요소에 대한 처리 방법에서 차이점이 있음
  • 객체 구조 분해 할당: 필요없으면 skip
  • 배열 구조 분해 할당: 필요없으면 empty

• 디폴트 값 지정 가능

→ 1 4 0 출력

🍥 중첩 구조 분해 할당

→ 중첩 객체에서도 지금까지 했던 방법과 마찬가지로 사용하면 됨 단 중첩되어 있는 b 객체의 사용 방법은 위와 같이 [{}] 형태로 적어줘야 함

🍥 반복문에서의 중첩 구조 분해 할당

• 사용 반복문: for-of

    for(조건 of 오브젝트){
        
    }

• 중첩 구조 객체

• 지금까지 한 것들을 토대로 위 객체에서 팀 이름(team)과 리더 이름(leader)을 반복문을 활용해 출력해 보면 아래와 같이 할 수 있음
  → for(조건)에 객체의 이름을 변경을 진행하고 있음
  → 지금까지 하던 형태로 바꾸면 아래와 같음

const {team:teamName, members:{leader:leadername}} = contest;

🍥 파라미터 값으로 구조 분해 할당

✔️ React에서 props 전달 시 자주 사용되는 구조 분해 할당

→ 함수 printKoreanName에 member 객체를 전달하면 세 개의 값이 전달됨
→ 이때 printKoreanName 함수의 역할은 koreanName만 출력하는 것 따라서 파라미터로 koreanName만 받고 그 값을 리턴하고 있음

• 출력 결과

→ 만약 firstName만 출력하고 싶다면?

중괄호를 통해 japanName이라는 객체 안에 있는 firstName이라는 객체를 가져오라는 뜻으로 해석하면 됨

• 결과

🍥 구조 분해 할당을 사용한 동적 변수 처리

• 사용 객체

• function으로 받은 값을 통해 구조 분해 할당을 하겠다는 의미

→ choice로 받은 지정 값(a, b, c 중 하나)을 userName으로 변경
→ 만약 a, b, c 중 값 외의 값이 들어온다면 Unknown 출력 (디폴트 값을 지정해 준 셈 == 안 적으면 undefined 출력)

• 함수 호출

• 결과

installHook.js:1 운동
installHook.js:1 애니 보기
installHook.js:1 영화 보기
installHook.js:1 unKnown

🍥 REST 패턴 (나머지 패턴)

• React에서 정말 많이 사용되는 패턴임
• 객체와 배열 그리고 함수의 파라미터를 넘겨 받은 값을 묶을 때 사용

첫 번째 예제

→ 가변 길이를 다 수용하기 위해 ...rest(변수O)를 사용 (값을 추가해도 전부 출력됨)
→ {}로 감싸면 객체 타입으로, []로 감싸면 배열 타입으로 선언됨

• 출력 결과
  

두 번째 예제

• name1을 한 객체로 그리고 나머지(age1, greeting)를 또 한 객체로 출력하기
  
  → name1은 name1 하나의 값을 갖는 객체가 되고, 그 외의 값들은 한 개의 객체로써 존재함 (이 또한 더 추가돼도 그대로)
• 출력 결과

세 번째 예제

• 리액트에서 많이 사용되는 방식
• 리액트 엔진은 상태 전용 함수인 훅을 사용해서 변수의 변화를 감지 (변화를 감지하지 않으면 새로운 값을 push 했을 때 값이 초기화 됨)

배열 예제

🍥 rest vs. spread

• 함수 파라미터에서 (...)연산자를 사용한다면 rest 패턴 (나머지 요소들을 묶어 배열로 처리)
• 함수 호출 시 (...)연산자를 사용한다면 spread 연산자 (묶어 있는 덩어리를 각각 분해해 전달)

spread

🍥 React에서의 구조 분해 할당 예시

① import React, { Component } from 'react';

→ Component라는 이름으로 객체로 사용하겠다는 뜻

② useState()

→ 데이터의 상태를 관리하는 훅의 종류 중 하나로 초기 값을 설정할 수 있음

const [a, b] = useState({
	// 초기 값 설정 - 배열 예시임 
    name: '',
    age: 
});
const [name, age] = a;

---

참고 강의: ITGO React JS Part2