[React] React 모듈 불러오는 방법 [5/30 study]

 

 

React 모듈 불러오는 방법

 

 

 

❗️상황

지금까지 아래와 같은 코드를 이용해서 사용했었는데

import { createContext } from 'react';

const MyContext = createContext(null);

 

다른 강의를 보면서 공부중 아래와 같은 코드를 사용해서 이게 뭐지? 하면서 찾아보았다

 

import React from 'react';

const MyContext = React.createContext(null);

 

❗️차이점

이 두 방법은 기능적으로 동일합니다.

React.createContext는 React 모듈의 메서드를 직접 호출하는 방식이고,

import { createContext } from 'react'는 ES6 구조 분해 할당을 사용하여 createContext 메서드만을 가져와 사용하는 방식입니다.

 

❗️그럼 언제 어떤 것을 사용해야 할까??

이 두 방법 중 어느 것을 사용해도 상관없습니다.

선택은 주로 코딩 스타일이나 팀의 코딩 컨벤션에 따라 달라질 수 있습니다.

 

❗️1. React 모듈을 한꺼번에 가져오는 경우:

React 객체를 한 번에 가져오는 경우에는 React.createContext를 사용할 수 있습니다.

이는 React 객체의 다른 메서드나 속성들을 같이 사용할 때 유용합니다.

import { createContext } from 'react';

const MyContext = createContext(null);

 

❗️2. 필요한 메서드만 가져오는 경우:

코드에서 React의 특정 메서드만 사용할 경우에는 구조 분해 할당을 통해 필요한 메서드만 가져오는 것이 코드 가독성에 도움이 될 수 있습니다.

import React from 'react';

const MyContext = React.createContext(null);

// React.Component나 React.useState 등 다른 메서드와 함께 사용
class MyComponent extends React.Component {
    // ...
}

 

🔥마무리

두 가지 방법 중 어떤 것을 사용해도 기능적인 차이는 없다는 것을 알게되었고, 코드 스타일과 상황에 맞게 선택하면 된다는 것 또한 알게되었다!! 팀 프로젝트할때 일관성을 맞추는게 좋을 것 같다는 생각도 들었다!

오늘도 화이팅!!