프로젝트12 [React] 리스트 값을 redux state에 저장하는 방법 (redux toolkit) 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 리액트의 리덕스를 사용하다보면, 리덕스에 일반적인 값이 아닌 리스트를 넣어야할 일이 생긴다. 이때 사용하는 방법은 다음과 같다. 1. map 함수를 활용하여 action.payload를 하나하나 state에 push를 이용하여 넣어준다. 2. 타입스크립트의 경우, 항상 타입을 지정해주어야 하므로, map을 하는 과정에서 타입을 지정해주도록 한다. 2022. 8. 23. [React] useRef()에 이전 값을 저장하는 방법 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) react를 사용하게 되면 input 태그의 기본 값을 설정 해놓을 일이 생기는 데, 이때 사용하는것이 useState와 useRef이다. 사용하고자 하는 목적에 따라 둘 중 하나를 선택하게 되는데, 이 중 useRef를 사용할 때, 기본 값을 설정하는 법에 대해 알아보자. input의 기본값을 넣어줄 때는 보통 value를 사용하게 된다. 하지만 value를 사용하게 되면, 값을 변경하려고 해도 바뀌지 않기 때문에 이때는 defaultValue를 사용하면 된다. 타입스크립트를 사용하는 경우, 넣어준 값 이외에도 null값이 발생할 수 있다면 에러가 발생하기 때문에 이.. 2022. 8. 23. [React] useLocation, useParams와 props 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) react가 사용하는 외부 패키지 중 react-router-dom이 있다. react-router-dom이 V6로 업데이트 되면서, 그전에 사용되었던 match, RouteComponentProps를 사용하지 못하게 되었는데, 그 대신 생긴 새로운 기능을 알아보도록 하자. 1. UseParams 우리가 라우터를 구성한 뒤, navigate나 Link를 이용하여 보내는 값인 to 값을 사용하고 싶으면 useParams()를 사용한다. 이 처럼 받는 라우터에서 useParams를 이용하여 주소값에서 해당 값을 빼내 사용할 수 있다. 2. UseLocation을 이용하는 .. 2022. 8. 22. [React] axios의 모듈화와 토큰 관리 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 취미공유 SNS인 모꼬지의 프로젝트를 진행하면서 만들어지는 많은 axios를 어떤식으로 관리했는지에 대해 적어보았다. 우리의 경우네는 사용되는 axios를 크게 두 분류로 정리해놓았는데, 토큰이 필요하지 않은 axios (비인증 api)와 토큰이 필요한 axios (인증이 필요한 api)로 나누어 사용했다. 토큰이 필요하지 않은 axios의 경우에는 일반적인 모듈화를 진행하여 import를 통해 불러와서 사용했으며, 토큰이 필요한 axios는 axios에서 제공하는 메서드인 interceptors를 사용하여, 실제 api 요청을 보내기 전, 프론트엔드에서 토큰의 만료를.. 2022. 8. 22. 이전 1 2 3 다음
