추가 : React-Native styled-components 설치 오류 해결 방법

본 내용이 반드시 정답은 아닙니다. 제가 해결한 방법을 정리해두기 위함입니다.

 

 

 

내가 겪은 문제 상황

• 리액트 네이티브 프로젝트를 처음 생성하고 styled-components를 설치하기 위한 명령어를 입력하였으나, 폴더를 따로 건드리지 않았음에도 오류가 생김.
• 오류 메시지를 확인해본 결과, react와 react-dom의 버전이 안 맞아서 생긴 문제로 추정함.

 

> npm install styled-components

pro p-types
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: myTodo@0.0.1
npm error Found: react@18.3.1
npm error node_modules/react
npm error react@"18.3.1" from the root project
npm error peer react@">= 16.8.0" from styled-components@6.1.14
npm error node_modules/styled-components
npm error styled-components@"*" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^19.0.0" from react-dom@19.0.0
npm error node_modules/react-dom
npm error peer react-dom@">= 16.8.0" from styled-components@6.1.14
npm error node_modules/styled-components
npm error styled-components@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\user\AppData\Local\npm-cache\~~
npm error A complete log of this run can be found in: C:\Users\user\AppData\Local\npm-cache\_logs\~~

 

 

이를 해결하기 위해 아래와 같은 순서로 진행함.

1. react와 react-dom의 버전을 맞춤.
2. Gradle 캐시와 의존성을 수정한 버전에 맞게 재설치함.
3. styled-components 재설치

npx @react-native-community/cli init (프로젝트 이름)
cd (프로젝트 이름)

// npm install styled-components -> 오류

/* 1. 버전 맞추기 */
npm install react@18.2.0 react-dom@18.2.0

/* 2. Gradle 캐시와 의존성 재설치 */
// node_modules 삭제
npm install
cd android
gradlew clean 
cd ..

/* 3. 재설치 */
npm install styled-components
npx react-native run-android

 

해결 완~

 

 

---

 

 

참고 : 사용 중인 포트 중단 시키는 방법

문제를 해결하기 위해 코드를 여러 번 돌리다보면 테스트를 위해 앱이 반복해서 실행되다보니 프로세스가 제대로 중단되지 않고 겹쳐서 실행된다. 그러면 사용 중인 포트라고 경고 문구가 뜨는데 그때 사용한 방법입니다!

netstat -ano | findstr :(사용 중인 포트 번호)
taskkill /PID (PID 번호) /F