상태변수를 사용하려 할 때, React.를 생략 가능한 경우

Q.

const [myName, setMyName] = React.useState('');

 

리엑트 프로젝트 내에 저런 코드가 있었어. 그런데, 그 아래에서는,

 

const [myPoint, setMyPoint] = useState(50);

 

이렇게 작성이 되어 있었어. React의 상태변수를 사용하려 할때, 상태변수값을 설정하기 위한 useState()함수 앞에 React.는 붙여야 하는거야, 아니면 생략 가능한거야? 생략이 가능하다면, 그 가능한 경우를 알려줘.

 

 

 

A.

React에서 useState를 사용할 때 React.useState처럼 앞에 React.를 붙이는 이유와 생략이 가능한 경우를 알아봅시다.

1. React.useState와 useState의 차이

• React.useState: React 라이브러리 객체에서 useState 함수를 직접 호출하는 방식입니다. React 모듈이 가져온 상태 그대로 사용하기 때문에 항상 유효합니다.
• useState: React에서 제공하는 훅(hook)을 바로 사용하는 방식입니다. 하지만 이를 사용하려면 React로부터 useState를 가져와야 합니다.

2. 생략이 가능한 경우

useState를 바로 사용하려면 다음과 같은 조건을 만족해야 합니다:

 

• React에서 useState를 별도로 import한 경우
  예를 들어, 아래와 같이 useState를 React로부터 직접 가져오는 구문이 코드에 있어야 합니다:

import React, { useState } from 'react';

이 경우, useState를 별도로 가져왔기 때문에 React.를 생략하고 바로 사용 가능합니다:

const [myPoint, setMyPoint] = useState(50); // React. 생략 가능

• default import 없이 구조 분해할당 사용
  아래처럼 React 객체 전체를 가져오는 대신, 필요한 함수만 구조 분해하여 가져온 경우도 마찬가지로 React.를 생략할 수 있습니다:이 경우도 동일하게 useState를 직접 사용할 수 있습니다.

import { useState } from 'react';

3. React.useState가 필요한 경우

React에서 useState를 구조 분해하지 않고 React 전체를 default import하는 경우에는 React.useState로 사용해야 합니다:

import React from 'react';

const [myName, setMyName] = React.useState(''); // React. 필요

4. 결론

React.를 생략할 수 있는 경우:

• useState를 React에서 구조 분해할당하여 가져온 경우 (import { useState } from 'react';)
• React에서 useState를 포함한 여러 훅을 같이 구조 분해하여 가져온 경우 (import React, { useState, useEffect } from 'react';)

React.를 붙여야 하는 경우:

• React 전체를 import React from 'react';로 가져온 경우에는 React.useState처럼 명시적으로 사용해야 합니다.

예시 코드 비교

1.생략 가능한 경우:

import React, { useState } from 'react';

const [myName, setMyName] = useState('');
const [myPoint, setMyPoint] = useState(50);

2. 생략 불가능한 경우:

import React from 'react';

const [myName, setMyName] = React.useState('');
const [myPoint, setMyPoint] = React.useState(50);

 

import 구문이 어떤 형태로 작성되어 있는지 확인해보고, 생략 가능 여부를 판단하면 됩니다. 🙂