React/error (10) 썸네일형 리스트형 [error] input 창 수정시 기존값 관련 오류(A component is changing an uncontrolled input to be controlled.) 수정페이지 구현을 위해 input 에 api를 통해 기존 값을 받아오자 아래와 같은 에러가 발생했다. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info input에서 부터 발견한 에러인데 그 전까진 없다가 수정시에 발생했다. 이는 기존 value에 값.. [React] useEffect, API 2번씩 호출 (feat:<React.StrictMode/>) 오류 useEffect안에서 함수를 2번 실행시키면 해당 컴포넌트가 각각 1개씩 총 2개가 뜨도록 구현중이었다. 그런데 계속 2번씩 호출되어 총 4개가 출력되는 문제가 일어났다. 조건문을 달아 함수를 작성해도 도저히 원하던대로 화면이 구현되지 않았다. 그리고 서치중 알게된 것..... react의 index.js에 모드가 존재하는데, 이것은 개발단계에서만 오류를 잘 잡기위해 구성요소를 두번 렌더링 한다. 이것때문에 계속 API가 2번씩 호출되었던 것이다..!! React Hooks: useEffect() is called twice even if an empty array is used as an argument I am new to reactJS and am writing code so that bef.. [React] 로컬스토리지에 저장된 Token을 API header전송시 오류 로그인 후 세션스토리지에 accessToken을 저장한 후, navigate('/')를 통해 게시판 화면으로 넘어간다. 그리고, 저장된 토큰을 API의 header에 전송하여 게시판의 정보를 불러와야한다. 그런데 게시판의 정보가 새로고침시에만 API 통신이 성공되어 불러와지는 오류가 발생했다. 살펴보니 로그인 후 저장된 token이 header로 제대로 전송되지 않았던 것이다. [Try 1] 원인 navigate는 HTTP요청을 새로 하지 않고 안의 내용만 바꾸기 때문에, 페이지가 unload되지 않고 내용만 바꿔지는 라우팅이 적용되었기 때문이다. 해결 window.location.href나 window.location.replace를 통해 해결할 수 있다. 이를 통해 페이지 전환을 할 시 HTTP요청을.. [React] 비밀번호 일치 Form 유효성검사 중 오류 해결(useEffect) 비밀번호 input과 비밀번호 재확인 input 2개의 비밀번호 일치여부 판단 코드를 작성 중 오류가 났다. helperText는 useState로 값이 변경되며 이러한 값이 변하는 조건은 다른 파일에서 props를 사용해 받아온 상황이다. 만약 아래와 같이 코드를 작성해서 helperText값이 변경되도록 하면 한단계 늦게 작동되는 오류가 났다. ▼ 오류 코드 {helperText} 하지만 이렇게 작성할 경우는 바로 변경된 useState값이 적용되었다. ▼ 정상작동 코드 {confirm ? '' : '비밀번호가 일치하지 않습니다.'} 하드코딩으로 한 경우만 바로 적용되어 텍스트를 나타낼 수 있었다. {helperText}가 한박자 늦게 반영되는 이유는 상태(state) 업데이트가 비동기로 이루어지기 .. [React] .env 적용안되는 오류 react 에서 숨기고자 하는 url 같은 것을 따로 .env 파일에 작성하면 안보인다. 1. .env 파일을 생성하고 코드를 작성한다.(REACT_APP으로 시작하기) REACT_APP_KAKAO_REST_API_KEY=~~~ 2. 사용하는 파일에서 선언한것을 이용해 사용하면 된다.(process.env.~) const KAKAO_REST_API_KEY = process.env.REACT_APP_KAKAO_REST_API_KEY; >>err 적용이 안되서 나중에 보니 VS CODE를 껐다 켜야 적용된다. 꼭 .env파일을 작성 후에는 다시 켜자..!!!!! [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] 회원가입 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] 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,.. 이전 1 2 다음
