[React] 한 줄로 코드를 깔끔하게? 구조 분해 할당 완전 정복

서론

React를 처음 배웠을 때, useState를 쓸 때마다 나오는 []와 ()의 조합이 도대체 무슨 의미인지 헷갈렸던 기억이 있다. 그냥 외워서 쓰긴 했지만, 코드의 의도를 정확히 이해하긴 어려웠다.

그러다 구조 분해 할당이라는 개념을 알게 되면서, 그동안 막연했던 코드가 하나씩 명확해지기 시작했다.

이번 글에서는 이 구조 분해 할당이 어떤 개념이고, 왜 React에서 자주 쓰이는지 쉽게 설명해보려고 한다.

구조 분해 할당이란?

구조 분해 할당(Destructuring Assignment)은 객체나 배열에서 값을 꺼내서 변수에 간결하게 할당할 수 있는 자바스크립트 문법이다.

기존에는 배열이나 객체에서 값을 꺼낼 때 아래와 같은 방식으로 작성했다.

const arr = [1, 2]
const first = arr[0]
const second = arr[1]

하지만 구조 분해 할당을 사용하면, 다음과 같이 한 줄로 동일한 결과를 얻을 수 있다.

const [first, second] = [1, 2]

객체도 마찬가지로 다음과 같이 사용할 수 있다.

// user 객체에 있는 name, age 속성이 {name, age} 변수에 구조를 분해하여 할당하는 느낌이다.
const user = { name: "Lee", age: 24 }
const { name, age } = user

이러한 방식은 코드를 짧고 명확하게 만들어 주며, 불필요한 변수 접근을 줄일 수 있다.

배열 구조 분해 - useState와 연결해서 이해해보기

React에서는 useState를 사용할 때 다음과 같은 구조를 자주 사용한다.

const [count, setCount] = useState(0)

이 구조는 배열 구조 분해 할당의 전형적인 예시이다. 사실 useState(0)은 배열을 반환하며, 아래처럼 사용할 수도 있다.

const stateArray = useState(0)
const count = stateArray[0]
const setCount = stateArray[1]

하지만 위 방식은 너무 번거롭기 때문에, 구조 분해 할당을 통해 아래와 같이 간결하게 작성한다.

const [count, setCount] = useState(0)

첫 번째 값은 현재 상태 값(count)이고, 두 번째 값은 상태를 갱신하는 함수(setCount)이다.

객체 구조 분해 - React import할 때 자주 사용함

React에서는 훅을 사용할 때 종종 아래와 같은 코드를 본 적이 있을 것이다.

import React from 'react'
const [count, setCount] = React.useState(0)

하지만 React.를 매번 붙이는 것은 코드가 길어지기 때문에, 보통은 객체 구조 분해를 사용해 다음과 같이 작성한다.

import { useState } from 'react'
const [count, setCount] = useState(0)

아래의 코드는 React라는 객체에서 useState라는 속성만 꺼내온 것이다. 객체 구조 분해는 다음과 같은 의미를 가진다.

const { useState } = React

필요한 기능만 선택적으로 꺼내올 수 있기 때문에, 코드가 짧아지고 명확해진다. 또한 전체 객체를 임포트하지 않아도 되므로 성능상 이점도 있다.

언제 쓰면 좋을까?

구조 분해 할당은 React 개발에서 매우 자주 사용된다. 특히 다음과 같은 상황에서 유용하게 쓰인다.

예시 하나 더 - props 구조 분해

다음은 컴포넌트에서 props를 구조 분해하지 않은 경우이다.

function Post(props) {
  return <h1>{props.title}</h1>
}

위 코드는 매번 props.를 붙여야 해서 다소 길어지고 가독성이 떨어질 수 있다. 구조 분해를 활용하면 다음과 같이 개선할 수 있다.

function Post({ title }) {
  return <h1>{title}</h1>
}

필요한 값만 선택적으로 꺼내기 때문에 코드가 간결하고 명확해진다. 협업 시에도 어떤 값이 필요한지 쉽게 파악할 수 있다.

마무리

구조 분해 할당은 자바스크립트의 기본 문법이지만, React 개발에서는 거의 필수로 사용된다.

특히 useState, useEffect, props, import 등 다양한 곳에서 반복적으로 활용되므로, 익숙해지면 개발 속도와 코드 품질이 크게 향상된다.

처음에는 다소 낯설게 느껴질 수 있지만, 실제 프로젝트나 연습에서 반복해서 사용하다 보면 자연스럽게 익힐 수 있다.

구조 분해 할당은 React 코드의 가독성과 효율성을 높여주는 강력한 도구이다.