Develop/react16 [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] Modal 컴포넌트 생성 및 활용 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 리액트와 타입스크립트를 사용한 프로젝트를 진행하면서, 모달을 어떤 식으로 만들고, 사용했는지에 대한 서술입니다. 1. Modal.ts 우리가 모달로서 계속해서 불러와 사용할 컴포넌트입니다. 모달은 기본적으로 props를 통해 내려받은 것을 바탕으로 활용되며, 우리는 타입스크립트를 사용중이므로, 컴포넌트의 코드의 맨 앞에 props로 내려받을 인자들의 타입을 지정해주어야 합니다. 이번 포스팅에서는 모달을 사용하는데 있어 가장 기본적인 4가지의 타입을 지정해줍니다. 그 외에 다른 사용처의 함수나 변수가 있다면 추가적으로 타입을 지정해주면 됩니다. props로 내려받을 것 .. 2022. 8. 22. [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. 이전 1 2 3 4 다음
