TIL - 객체 비구조화 할당과 배열 비구조화 할당

1. 객체 비구조화 할당

---

const My component = props => {
  
	return (
    	<div>
      		테스트 입니다. 제 이름은 {props.name}입니다.
      		children 값은 {props.children}입니다.
      	</div>
    ); 
};

  이러한 컴포넌트가 있다고 가정할 때 부모 컴포넌트로 부터 props를 받아오고 props에 있는 값을 조회할때마다 props.something의 식으로 props.라는 키워드를 붙여 주어야 한다.

const My component = props => {
	const { name, children } = props;
	return (
    	<div>
      		테스트 입니다. 제 이름은 {name}입니다.
      		children 값은 {children}입니다.
      	</div>
    ); 
};

  위와 같은 식으로 코드를 작성하면 조금더 간결하게 코드를 작성할 수 있다. 이렇게 객체에서 값을 추출하는 문법을 비구조화 할당(destructing assignment)이라고 부른다. 구조 분해 문법이라고도 불리며 다음과 같이 함수의 파라미터 부분에서도 사용할 수 있다.

const My component = { name, children } => {
	return (
    	<div>
      		테스트 입니다. 제 이름은 {name}입니다.
      		children 값은 {children}입니다.
      	</div>
    ); 
};

2. 배열 비구조화 할당

---

  배열 비구조화 할당도 위에서 언급한 객체 비구조화 할당과 비슷하다. 배열 안에 들어 있는 값을 쉽게 추출 할 수 있도록 도와주는 문법이다. 배열 비구조화 할당을 사용하면 다음과 같이 표현이 가능해진다.

const array = [1, 2];
const [one, two] = array;

console.log(one);// 1

  배열 비구조화 할당을 알고 나면 useState Hook에 대한 이해를 쉽게 할 수 있다.

const [msg, setMsg] = useState('예시 입니다!');
cosnt setMsg = '예시 입니까?'
 
//첫번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어 주는 함수이다. 이 함수를 세터(Setter)함수라고 부른다.

  배열 비구조화 할당을 통해 이름을 자유롭게 정해 줄 수도 있다.

3. 참조

---

리액트를 다루는 기술 (김민준) : 3.3.5 비구조화 할당 문법을 통해 props 내부값 추출하기 / 3.4.2 함수 컨포넌트에서 useState 사용하기