인프런 커뮤니티 질문&답변
작성한 질문수
라우터 사용하고부터 모든 컴포넌트에 리액트를 임포트해야 해요
작성
·
28
0
react-router-dom 을 사용한 후부터
랜더링되는 하단의 모든 컴포넌트에 react를 import하지 않으면 오류가 발생하거든요
그런데 이전에는 분명 안 이랬어서....
import를 하면 되니까 개발이 안 되는 건 아닌데
강의를 계속 듣다 보니 강사님은 import하지 않으셔도 되는 거 같아서 궁금해서 물어봅니다.
버전 차이 때문일까요? 제가 무슨 설정을 잘못한 걸까요?
버전은 아래와 같습니다..
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-router-dom": "^7.10.1"
},답변 3
0
안녕하세요 이정환입니다.
보내주신 깃허브 링크에서 소스코드를 다운로드받아 확인해보았습니다.
제가 직접 확인해 본 결과 아래 그림처럼 import React를 제거해도 별다른 문제가 발생하지 않았습니다.
이에 원인은 아마 실습 환경에서의 타입스크립트 버전 차이가 아닐까 의심됩니다..! 이에 다음과 같이 현재 사용중이신 타입스크립트 버전 확인 방법을 안내드리겠습니다.
먼저 VSCode 에서 Ctrl + Shift + P를 눌러 select typescript version 이라고 검색합니다. 그럼 아래 그림처럼 TypeScript 버전 선택 이라는 항목이 나오는데 여기서 엔터를 눌러주세요
그럼 다음 그림처럼 선택 가능한 여러개의 (혹은 하나의) 타입스크립트 버전이 나타납니다. 이때 사용하고 계신 타입스크립트 버전이 몇 버전인지 확인해보시면 되겠습니다!
0
안녕하세요 qkrgusdl95님 이정환입니다.
질문에 올려주신 버전과 동일하게 직접 프로젝트를 생성해 확인해 본 결과 동일한 문제가 발생하지 않는것을 확인했습니다. 따라서 다른 부분에 문제가 있을 것으로 예상됩니다.
정확한 원인 파악을 위해서는 오류가 발생한다면 어떤 오류가 발생하는지, 또 어디에서 오류가 발생하는지 캡쳐하셔서 올려주신 다음에 프로젝트 전체 코드를 깃허브 또는 구글 드라이브 링크 형태로 전달해주시면 감사하겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. qkrgusdl95님.
React에서 발생할 수 있는 import 관련된 이슈에 대해 문의해 주셨군요. 현대의 React 버전에서는 JSX를 컴파일 할 때 ‘automatic’ JSX 변환 규칙이 적용되면서 <React.Fragment>와 같은 React 컴포넌트 사용시 import React from 'react'; 문이 자동으로 추가되도록 설정되어 있습니다. 하지만, 만약 오류가 발생하면서 수작업으로 import React from 'react';를 추가해야 한다면, 몇 가지 확인할만한 사항들이 있습니다.
주요 점검 사항 및 해결 방법:
- Babel 설정:
babel설정에서preset-react옵션이runtime: "automatic"으로 설정되어 있는지 확인하세요. 그렇지 않다면,runtime옵션을automatic으로 변경하면, 매번 수동으로React를 import하지 않아도 됩니다.
{
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}
버전 호환성: 사용하고 계신
react및react-dom의 버전이 적절히 설정되어 있는지 확인하세요. 기존에 사용하시던 예제나 강의는React 17이상에서 적용된 정책을 기반으로 작동할 수 있습니다.컴파일러 및 번들러 설정: 앱에서 사용 중인 컴파일러 혹은 번들러가 최신 설정에 맞게 구성되어 있는지 점검해 보세요. 예를 들어,
Webpack을 사용하는 경우 적절한 로더가 설정되어 있어야 합니다.직접 코드 변경: 모든 컴포넌트에서
React를 수동으로 임포트하는 방법 역시 하나의 해결책이지만, 코드가 장기적으로 유지보수하기 불편해질 수 있습니다.
추가로 확인 가능한 유사한 문제 해결 방법:
위의 내용을 바탕으로 문제를 해결해 보시고, 여전히 이슈가 지속될 경우 추가적인 정보나 콘솔 오류 메시지와 함께 다시 질문해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
babel 설정은 어떻게 변경할 수 있을까요??
이전 프로젝트까지는 문제 없이 잘 됐는데, 이번 프로젝트에서만 react import를 제외하면 아래와 같은 메시지가 뜨면서 창이 표시되지 않습니다.
ReferenceError: React is not defined
at DiaryList (DiaryList.jsx:11:5)
보여주신 위의 두 예시는 저와 같은 상황이 아닌 것 같네요ㅠ
안녕하세요! 답변 주셔서 감사합니다. 확인해보니 이런식으로 뜨는데 타입스크립트가 설치되지 않은 걸까요...? 타입스크립트를 설치해야 한다면 어떤 버전으로 설치하면 좋을지요..?