[Next.js] React.useState와 useState, 단순한 스타일 차이일까?

서론

 

React에서는 상태를 관리할 때 useState라는 훅을 자주 사용한다. 그런데 코드를 보다 보면 React.useState(...)처럼 쓰는 경우도 있고, 그냥 useState(...)만 사용하는 경우도 있다.

 

이 둘은 어떤 차이가 있을까? 그리고 어떤 걸 쓰는 게 더 좋을까? Next.js 환경 기준으로 그 차이점과 추천 사용법을 정리해보자.

 

 

 

기본 개념 정리

 

React에서 훅(hook)은 상태나 생명주기와 관련된 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 도구다. 이 중 useState는 가장 기본적인 훅으로, 상태를 만들고 변경하는 데 사용된다.

 

useState는 React 객체에 포함되어 있는 함수이기 때문에, React.useState처럼 쓸 수도 있고, 구조 분해 할당을 통해 useState만 따로 import해서 쓸 수도 있다. 두 방식 모두 동작은 완전히 같다.

🚨잠깐!!🚨 '구조 분해 할당'에 대해서는 아래 글을 참고하자!

https://pangil-log.tistory.com/255

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

 

 

 

코드 예시

 

예를 들어 아래 두 코드는 결과적으로 동일하게 작동한다.

// 방식 1 - React 객체에서 호출
import React from 'react'

const [count, setCount] = React.useState(0)

 

위 코드는 React 전체를 import React from 'react'로 불러온 뒤 React.useState로 상태를 초기화하고 있다. JSX 문법을 사용할 때 자동으로 React가 필요했던 시절의 흔적이다.

// 방식 2 - 구조 분해 import
import { useState } from 'react'

const [count, setCount] = useState(0)

 

이 방식은 필요한 훅만 따로 가져오는 형태로, 코드가 더 간결하고 현대적인 스타일이다. 특히 여러 훅을 함께 사용할 때 더 깔끔하게 정리된다.

 

 

 

차이점

항목	React.useState	useState
코드 스타일	React 전체를 명시	간결하고 깔끔
트리 쉐이킹	덜 효율적일 수 있음	더 효율적 (필요한 훅만 import)
가독성	React라는 컨텍스트가 명확	훅만 보이므로 직관적
import 명시	React로만 import	useState, useEffect 등을 각각 import 해야 함

 

기능적으로는 둘 다 동일하지만, 코드 스타일이나 번들 최적화 면에서 차이가 있다.

 

특히 최신 React에서는 JSX에서 React 객체가 자동으로 불필요해졌기 때문에, 굳이 전체를 import할 필요가 없어졌다.

 

그래서 대부분의 경우 useState만 따로 가져오는 방식이 더 선호된다.

 

 

 

Next.js 환경에서 고려할 점

 

Next.js에서는 서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component)를 구분한다.

 

useState는 브라우저에서만 작동하는 훅이기 때문에, 이걸 사용하는 컴포넌트는 반드시 use client를 선언해야 한다.

 

중요한 점은 React.useState든 useState든 상태 훅을 사용하는 순간 클라이언트 컴포넌트가 된다는 점이다.

 

즉, 어느 방식을 쓰든 useState가 들어간 컴포넌트에는 꼭 'use client'를 선언해야 한다.

 

 

 

언제 어떤 것을 사용할까?

상황	추천 방식	이유
빠르게 테스트하거나 혼자 작성할 때	아무거나 OK	동작 차이 없음
협업 시, 코드 컨벤션을 정해야 할 때	useState	구조 분해 import가 보편적이고 읽기 쉬움
훅이 많은 경우 (useEffect, useRef 등)	useState + 구조 분해 import	더 깔끔하고 최적화에 도움
전체 React 객체가 필요한 경우 (예: React.createContext)	React.useState	React 자체를 사용하는 상황이므로 일관성 유지 가능

 

개발할 때마다 선택을 고민하기보다는, 팀에서 하나의 스타일을 정해두고 일관되게 사용하는 것이 가장 좋다.

 

개인적으로는 구조 분해 방식이 읽기 쉽고 유지보수하기 편하기 때문에 협업에서도 많이 선호된다.

 

 

 

결론 (정리)

• React.useState와 useState는 기능상 완전히 동일하다.
• 최신 React + Next.js 환경에서는 구조 분해 import 방식 (useState)을 사용하는 것이 더 간결하고 효율적이다.
• 단, 코드 전체에서 일관된 스타일을 유지하는 것이 가장 중요하다.
• Next.js에서는 useState를 쓰는 컴포넌트에는 반드시 'use client' 선언이 필요하다.

 

 

 

✅ 추천 패턴 예시

// 클라이언트 컴포넌트임을 명시 (useState, useEffect 등 브라우저 훅 사용 시 필수)
'use client'

// React 훅 중 useState와 useEffect만 구조 분해하여 import
import { useState, useEffect } from 'react'

// Example 컴포넌트를 기본(default)으로 export
export default function Example() {
  // value라는 상태 변수를 선언하고, setValue로 그 값을 갱신함. 초기값은 빈 문자열.
  const [value, setValue] = useState('')

  // input 요소의 value를 상태값과 바인딩하고, 변경될 때마다 setValue로 상태 업데이트
  return <input value={value} onChange={e => setValue(e.target.value)} />
}

 

이런 식으로 정리하면, 단순히 "어떤 걸 써야 하지?"가 아니라, 왜 그런 선택을 해야 하는지 이해하면서 코딩할 수 있게 된다.