action.type 불러오는 방식

웹 게임을 만들며 배우는 React

7-3. action 만들어 dispatch 하기

작성

132

import/export가 아닌 require/module.export로 파일 불러오고 있는데요. action.type 값 전달에서 궁금한 점이 있어서 질문 남겼습니다!

먼저 아래 코드로

// main.jsx
const SET_WINNER = 'SET_WINNER'; 
const CLICK_CELL = 'CLICK_CELL'; 
const CHANGE_TURN = 'CHANGE_TURN';  

exports.SET_WINNER = SET_WINNER 
exports.CLICK_CELL = CLICK_CELL 
exports.CHANGE_TURN = CHANGE_TURN

// td.jsx
const { SET_WINNER, CLICK_CELL, CHANGE_TURN } = require('./tiktaktok_functional');

불러오면 action.type이 undefined로 출력됩니다.

근데 아래 방식대로 작성하면 action.type이 불러와집니다.

// main.jsx
exports.SET_WINNER = SET_WINNER = 'SET_WINNER';
exports.CLICK_CELL = CLICK_CELL = 'CLICK_CELL';
exports.CHANGE_TURN = CHANGE_TURN = 'CHANGE_TURN';

// td.jsx
// 불러오지 않음

// main.jsx
const SET_WINNER = 'SET_WINNER';
const CLICK_CELL = 'CLICK_CELL';
const CHANGE_TURN = 'CHANGE_TURN';

exports.SET_WINNER 
exports.CLICK_CELL
exports.CHANGE_TURN

// td.jsx
const CLICK_CELL = 'CLICK_CELL';
const CHANGE_TURN = 'CHANGE_TURN';

원래라면 module.export 사용 중이면 어떻게 불러와야 되나요?

react

답변 2

제로초(조현영)

지식공유자

원래는 위와 같이 해도 되는 게 맞습니다. 전체 코드를 봐야겠는데요. 혹시 module.exports도 쓰신 적 있는 거 아닌가요?

현대적인유교보이

질문자

리액트에서 처음 써보고 있습니다. 맨 위 코드가 맞다면 다시 확인해봐야겠네요.

현대적인유교보이

질문자

CommonJS 방식에서 ES6 모듈로 바꿨더니 잘 되네요. CommonJS에서 작동 안 됐던 이유가 구조분해할당을 해도 안에 {}가 감싸져 있어서 인식을 못 한 거 같네요.

console.log(CLICK_CELL) // {...}

console.log({CLICK_CELL}) // {CLICK_CELL: {CLICK_CELL: 'CLICK_CELL'}}

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

현대적인유교보이님의 질문에 대해, CommonJS 모듈 시스템에서의 exports와 require 사용법과 관련하여 이해를 돕기 위해 유사 상황을 처리한 기존 답변을 안내드립니다.

질문에서 언급하신 모듈 내보내기와 가져오기의 예시는 module.exports와 require을 활용한 상황으로 보입니다. 이와 관련해 몇 가지 주의할 점을 소개하고자 합니다.

exports 객체에 값을 할당하고 이를 다른 파일에서 사용할 때, 그 구조가 일관적이어야 합니다. 첫 번째 코드에서는 값들을 exports 객체에 별도의 프로퍼티로 추가하여 내보냈고, 두 번째 코드에서 객체 구조분해 할당을 통해 그 값을 가져오려 했습니다. 이 과정은 올바르게 진행된 것으로 보입니다.
exports.SET_WINNER = SET_WINNER와 같이 쓰기 전에 SET_WINNER 변수에 값을 할당해야 합니다. 그래야 exports 객체에 실제 값이 할당됩니다.
다만 exports.SET_WINNER = SET_WINNER = 'SET_WINNER'; 형태에서 SET_WINNER = 'SET_WINNER';는 SET_WINNER 변수에 직접 값을 할당하는 것이고, 이어지는 exports.SET_WINNER = SET_WINNER;는 이미 값이 할당된 SET_WINNER을 exports 객체에도 할당하는 것입니다. 그렇기 때문에 이런 방식은 권장되지 않습니다.

현대적인유교보이님의 경우에는 첫 번째 코드가 일반적인 사용법에 부합합니다. exports 객체에 프로퍼티를 추가하는 방식으로 값을 내보내고, 가져올 때는 구조 분해 할당을 활용하여 가져오는 것이 정상적인 방법인데, 해당 값이 undefined로 출력된다면 다른 문제가 있을 수 있습니다.

직접적인 해결 방안으로, common js 방식으로 내보내기를 하던 도중 문제가 생겨 질문 드립니다! 글에서 제시된 상황과 비슷한 경우에 대한 답변이 도움이 될 수 있습니다. 여기서는 CommonJS와 ES6 모듈 시스템의 차이, 순환 참조 문제 등에 대해 언급되어 있어 현대적인유교보이님의 상황에 대해서도 일부 설명이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

action.type 불러오는 방식