본문 바로가기

React

 (115)
[React] npm i 에러 해결(--force, --legacy-peer-deps) 기존 프로젝트를 클론 후 npm i를 했더니 오류가 발생하였다. 내 react 버전과 기존 프로젝트 버전이 맞지 않아 생기는 오류라고 한다. 해결은 아래 블로그 내용을 참고하였다. 나는 아래 실행으로 해결 되었다. (설치후 기존 start에 따라 npm run start:local 했더니 실행됨) npm i --legacy-peer-deps + recoil-persist 를 추후 설치하고 싶은데 버전때문에 오류가 남. 아래로 진행하자 설치됨 npm i --legacy-peer-deps recoil-persist https://naveen.tistory.com/22 NPM 인스톨 에러 --force, --legacy-peer-deps 작년인가 재작년인가 세팅한 프로젝트와 동일한 구성으로 새로운 프로젝트를 ..
[React] MUI (Material-UI) CSS 사용하기 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. mui.com React CSS를 쉽게 도와주는 프레임 워크 설치 npm install @mui/material @emotion/react @emotion/styled 아이콘 설치 npm i @mui/icons-material + 위에선 Emotion을 설치했는데 Styled-component를 사용하고 싶다면? npm install..
[React] useEffect()의 Callback으로 async 함수를 쓰지 않는 이유 오류 useEffect callback 함수에서 async await을 사용하는 경우 destory is not a function이라는 에러를 만나게 된다. async await은 promise 객체를 반환하게 되는데 useEffect는 promise 값을 받게되어 에러가 발생한 것이다. 다음 두가지 이유를 생각하면 못쓰는게 당연하다. 1. async 함수는 promise객체를 리턴한다. 2. useEffect 훅에 전달되는 callback 함수의 리턴값은 clean-up function이여야 한다. 실제로 useEffect함수에 async를 콜백으로 줄때 다음과 같은 경고문을 볼 수 있다. // Warning: Effect callbacks are synchronous // to prevent rac..
[React] 회원가입 API- axios Error 처리 중 정해진 message를 띄우기 회원가입 기능을 구현하는 도중 try catch 를 이용하여 오류시 정해진 message를 띄우고 싶었으나 안됨 => api 폴더에서 catch 부분에서 return 값이 없었다. (service에서 수정만했는데 애초에 API 형태로 받아지는데에서 부터 return을 하지 않아 생긴 오류였다.) 때문에 return을 통해 값을 정해줘야 err에 대한 정해진 데이터를 다른 파일에서도 받을 수 있었다. ... catch (err) { alert(err.response.data.message); return err.response; } 위와 같이 설정한다면 공통적으로 모든 페이지에서 메시지를 띄울 수 있다.(공통으로 모달띄우기도 가능) 만약 console.log(err) 를 해본다면 다음과 같이 내용을 확인할..
[React] React Bootstrap 사용하기 리액트에서 부트스트랩을 사용할수 있는 라이브러리는 2개가 있다. react-bootstrap (이걸 사용할 것임) 과 reactstrap React Bootstrap https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 설치 npm install react-bootstrap bootstrap import (App.js에서 import한다.) import 'bootstrap/dist/css/bootstrap.min.css'; App.js파일을 다음과 같이 수정한다. import 'bootstrap/dist/css/boots..
[React] useNavigate()와 useLocation()으로 페이지 이동하면서 값 전달하기 페이지를 이동하면서 값을 전달하고 싶을 때, 기존 페이지에서 useNavigate()로 값을 전달하고, 새로운 페이지에서 useLocation()으로 값을 받아오는 방법을 사용할 수 있다. * React-dom-router v6 기준 useNavigate() 페이지를 이동하면서 값을 전달합니다. 1. useNavigate()를 객체에 초기화합니다. 2. 객체("/페이지 주소", { state: { 키: 값 } } )의 형태로 작성합니다. import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); const clicked = () => { navigate("/newpage", { state: { value: 1234 } }..
[React] ref 컴포넌트 props로 내려줄 때 오류 해결 상황 ref 를 사용하여 if에서 오류시 textarea에 포커싱을 주도록 설정하였으나 오류가 발생하였다. import React, { useRef } from 'react'; //1.선언 const contentInput = useRef(); //2.useRef(); ... if (!values.content) { contentInput.current.focus(); //3. ref 사용 } ... 오류문구 Warning: TextArea: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component,..
[React] .env 사용하기(URL 등 비공개 이용) env 파일 종류 .env: 기본 .env.local: test환경 외에 모든 환경에서 로드됨 .env.development: 개발환경 /npm start로 실행할 떄 .env.test: 테스트 환경 / npm test로 실행할 떄 .env.production: 배포 환경 / npm run build로 실행 할 때 1. root 경로에 .env 파일 생성 2. gitignore 파일에 설정(.env 추가) 3. 환경변수 설정 환경 변수를 설정 할 떄 REACT_APP을 반드시 붙여줘야 함 REACT_APP_MOVIE_API_KEY='sksms123131' REACT_APP_MOVIE_API_PASSWORD='sksms123131' REACT_APP_API_URL=https://api.staging.mys..

티스토리툴바