React

쿼리 스트링은 url주소의 뒤에 붙은 '?'뒤의 문자열인데 주소창에 함께 전달할 수 있는 데이터라고 보면 된다. 주로 GET요청시에 많이 쓰이는 방법이고 ?key=value 와 같은 형식을 가지며 2개 이상이면 구분자로 '&'를 사용한다.쿼리스트링 값을 주소창에 보이게

연습 프로젝트에서 페이지 전환 시 인증을 거치는데 1~5초 정도 로딩 시간이 생겼고 이때 실제화면을 보여주지 않고 로딩 스피너가 나오는 페이지를 거치도록 만드는 상황이 생겼다. 구현하기 위해 0.1초마다 다른 이미지를 보여주는 로딩 이미지 배열을 만들고 setInter

리액트에서 화면을 업데이트(리렌더링)하고 싶다면 특정 컴포넌트가 변경되었다는것을 알려주는 방법이 필요하다.useState는 함수 컴포넌트 내에서 어떠한 상태와 리렌더링 되는 상태의 값을 지정해주는 hook이다.

useState의 내부동작에는 자바스크립트의 클로저개념이 사용된다. 클로저가 사용되는 코드를 알아보고 클로저의 개념도 다시 상기시켜보자.클로저는 반환된 내부함수가 자신이 되었을 때의 렉시컬환경인 스코프를 기억하여 자신이 선언되었을 때의 환경(스코프)밖에서 호출이 되어도

프로젝트를 진행하면서 발생했던 react hook form관련 이슈입니다. 1.register옵션의 onChange와 일반 onChange의 차이 회원가입과 게시물 작성 폼에서validation과 input value를 더 쉽게 관리할 수 있다는 기대감을 가지고 react-hook-form을 프로젝트에 도입해 보았습니다. 하려고 했던것은 >1. reac...

이번 프로젝트에 react-query를 서버 상태관리 라이브러리로 사용하게 되면서 전역상태관리를 위해 당연스레 사용했었던 redux와 redux-toolkit을 사용하는게 다소 부담스럽다고 생각이 되었기 때문에 비교적 러닝커브가 낮고 보일러플레이트가 적은 recoil을

비동기 로직을 포함한 전역상태 관리의 어려움 프론트엔드의 꽃은 비동기 요청 처리와 상태관리가 아닌가 생각한다. 나는 리액트에서 비동기로직 처리와 데이터 관리를 어려워하고 이에 대한 고민을 많이 하곤했다. Context Api로 상태를 관리했을 때는 일단 컴포넌트 상태를 업데이트해서 보이는 화면만 먼저 변화시키고 서버는 따로 요청 보내서 db업데이트 시키...

마지막으로 프로젝트에 적용해본 리액트쿼리의 버전이 v3버전이고 그 이후로는 사용해본 적이 없어서 리액트쿼리 공식문서를 다시 정독해보고 v5버전에서 새롭게 추가되거나 바뀐 내용들을 정리해본다. 미래의 내가 다시 문서를 읽으면서 해석하는 시간을 줄이기 위함이기에 나에게 필

useQuery, useQueries의 옵션과 반환값

리스트를 조회하는 페이지에서 데이터를 필터링하는 옵션 항목들이 있고 옵션 선택 후 조회버튼을 클릭했을 때 데이터를 조회해야 한다. 상세페이지에서 리스트 페이지로 돌아왔을 때 이전항목들이 남아있어야 한다. 필터링 옵션들을 쿼리키로 지정. 리스트 페이지로 돌아