[Javascript] 구조분해할당 (useState, props)

구조분해할당

구조분해 할당이란 객체나 배열의 구조를 분해하여 어떠한 개별 변수에 할당하는 것을 말한다.

구조분해할당 예제를 React에서 찾아보았다.

useState

const [liked, setLiked] = useState(''); //구조분해

const result = useState('');
const liked = result[0];
const setLiked = result[1];

간편하게 사용하기 위해서 const [liked, setLiked] = useState(''); 이렇게 사용한 것이다.

Props

✔️ 구조분해할당 미적용

props로 전달 받은 데이터를 자식에게 전달해주는 방법이다.
프로그래밍에서는 반복을 싫어하므로 구조분해할당을 사용하여 값을 사용하는 것이 더 좋다!

const Example = (props) => {
   return (
	<View>
	    <Text>name: {props.name}</Text>
            <Text>age: {props.age}</Text>
        </View>	
   )
}

✔️ 구조분해할당 적용

두개의 코드는 동일하다.
두가지 방식 모두 큰 차이점은 없으나 첫번째 코드가 더 간결하게 코드를 작성할 수 있다.

const Example = ({ name, age }) => {
   return (
	<View>
	    <Text>name: {name}</Text>
            <Text>age: {age}</Text>
        </View>	
   )
}

매개변수 props에 있는 name, age 프로퍼티를 구조 분해 할당하여 같은 이름의 상수에 저장한다.

const Example = (props) => {
   const { name, age } = props;

   return (
	<View>
	    <Text>name: {name}</Text>
            <Text>age: {age}</Text>
        </View>	
   )
}