Will find a way

들어가기 전리액트를 공부하거나 다뤄본 사람들은 React Query를 한번쯤 다뤄봤거나 다루게 될 것이다. 그만큼 리액트에서는 반드시 알아야 라이브러리다. 리액트 쿼리에 대해서 잘 모를 때 서버에서 데이터를 가져올 때 사용했기 때문에 리액트에서 사용하는 비동기라이브러리(?) 중 하나라고만 생각했다. 공부를 하고 적용을 하며 내가 생각한만큼 단순한 것이 아님을 알게 됐다. 내가 가지고 있는 잘못된 개념을 다시 한번 정리하고자 이 글을 포스팅 하게 됐다.Tanstack Query 란?Tanstack Query는 서버에서 데이터를 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 효율적으로 관리할 수 있는 라이브러리다. 원래는 React Query라는 이름을 사용하였으나 Vue나 다른 곳에서도 사용할 수 있게 ..

들어가기 전프로젝트를 진행하면서 클릭 시 페이지 이동과 함께 데이터를 요청하는 작업을 자주 하게 됐다. 리액트에서 페이지를 이동하는 방법으로는 보통 useNavigate 훅을 사용해, 함수를 변수에 담아 활용해왔다. 그렇게 당연하게 사용하던 중, 문득 redirect라는 개념이 떠올랐다.이 차이를 알기 전에는 redirect와 navigate가 단순히 페이지를 이동시켜주는 같은 도구라고 생각했다. “둘 중 아무거나 써도 되는 거 아닌가?“라는 의문이 들었고, 곧 두 방식이 사용 목적부터 다르다는 사실을 알게 되었다. navigate와 redirect 차이를 알아보자. 이 글은 리액트와 리액트 훅에 대해서 안다는 가정하에 쓰여진 글이다. navigate 란?const navigate = useNaviga..

들어가기 전프로젝트를 진행하면서 프론트를 같이 담당하고 있는 팀원이 새로운 라이브러리를 써보자. 라는 의견을 제시해서 나온 것중에 하나가 저번 글에 작성했던 Zod였고 다른 하나는 React-hook-form 이다. 인터넷을 검색하다 보면 Zod와 React-hook-form을 같이 쓰는 글들을 찾아 보기 쉽다. 그 만큼 이 두 라이브러리 조합이 좋다는 것을 의미한다고 생각한다. 본론으로 들어가서 React-hook-form에 대해서 알아보자. React-Hook-Form (RHF) 란?이름에서 알 수 있듯이 form을 관리하는 라이브러리 중 하나다.유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다.줄여서 RHF라고도 하는 듯하다.RHF 를 사용..

약관동의 구현 (모든 약관, 필수약관)React + Typescript 회원가입 기능을 구현하고 있다.그 중에 하나인 회원가입 전 약관동의를 하는 페이지를 만들었다.그래서 내가 한 방법을 공유해보려고 한다. 원하던 것- 모든약관 동의(체크)하면 필수/선택 약관 모두 체크 박스 체크- 이 중 하나의 약관만 체크가 해제되면 모든 약관 해제- 모든 약관 + 필수 약관 둘중 하나만 조건 충족되면 다음 페이지 활성화 기능구현1. 체크박스가 여러개 쓰일 것을 고려하여 컴포넌트로 제작CheckBox.tsxtype CheckBoxType = { id: string; className?: string; checked: boolean; onChange: (e: React.ChangeEvent) => void;};c..

들어가기 전createBrowserRouter라는 것을 접하게 된 계기는 현재 간단한 프로젝트를 진행하던중 router처리를 할 일이 있었다. 리액트 router 처리는 BrowserRouter 밖에 모르는 내게 프론트 팀원이 loader라는 기능을 사용하면 좋을것 같다는 제의를 했다. loader는 컴포넌트가 렌더링되기 전에 데이터를 미리 불러오는 함수로 서버에서 데이터를 받아오는데 적합하고, SSR CSR 모두에게 잘 어울린다는 장점을 알려줬다. 그런데 그 loader를 사용하기 위해서 router처리를 createBrowserRouter라는 것을 사용해야한다고 한다. 본격적으로 알아보자.  createBrowserRouter 란?React Router v6.4 이상에서 도입된 새로운 라우팅 방식이다..

들어가기 전최근에 간단한 프로젝트를 해보려고 시도하고 있었다. 어떤 라이브러리가 필수적으로 쓰이며, 많이 쓰이는지 찾던 중Zustand라는 것을 알게 됐다. Zustand가 무엇이며 뭐가 좋으며 예제에 대해서 알아보는 시간을 가져보자  Zustand 란 무엇인가?Zustand라는 말은 독일어로 '상태' 라는 말을 의미한다.이걸 통해서도 상태에 관한 무엇인가를 우리는 유추할 수 있다.Zustand는 가벼운 상태 관리 라이브러리로, Redux보다 간결하고 사용하기 쉽다. Zustand를 알기 위한 필수 개념1. Store> store는 애플리케이션의 전역 상태(state)를 저장하고 관리하는 공간입니다.React에서 일반적으로 상태는 useState나 useReducer를 사용하여 개별 컴포넌트에서 관리(u..

들어가기 전평소에 React를 사용할 때 CRA(Create React App) 라는 CLI 도구가 사용됐다.React로 TailwindCss를 적용하기 위해서 공식문서를 확인하던 중 Vite에 대해서 알게 됐다.Vite가 무엇이며 CRA (Create React App)가 있는데 왜 Vite를 사용하는지 알아보자. https://ko.vite.dev/guide/ ViteVite, 프런트엔드 개발의 새로운 기준ko.vite.dev Vite란?Vite란 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.(Vite : 프랑스어로 "빠르다"를 의미) CRA (Create React App) 대신 Vite를 사용하는 이유1. CRA로 만든 프로젝트에 node_module은 많은 용량..

지난번 글에서 Redux에 대해서 포스팅 했는데 제대로 이해가 되지 않아서 예제로 확인해보려고 한다.(App.js 는 작성하지 않아도 있다고 가정하고 예제를 만들어 보려고 한다.모든 컴포넌트는 src에 있음을 염두해두고 코드를 작성해보려고 한다.) Reducer 부분reducer/orderReducer/index.js// Reducer 함수// 초기값을 기본으로 할당// state// 기본값을 할당// 초기에는 기본값이 사용된다.const initialState = { order: ""}const reducer = (state = initialState, action) => { // state 초기에는 기본값으로 할당한 initialState가 할당되ㅏ고 // 상태를 업데이트 이후에는 이전 상태값을..

https://despiteallthat.tistory.com/192 [Redux] Redux란?오늘은 Redux에 대해 알아보겠습니다. :) [ Redux ] Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포despiteallthat.tistory.comhttps://jwdevv.tistory.com/37 [Redux toolkit] 2 - Slice, Reducer, Action, Thunk란?지난 글에서 Redux와 Redux Toolkit의 차이점에 대해 알아보았다. [Redux Toolkit] 1 - Redux Toolkit이란? | Redux와 Redux Toolkit 차이 Redu..

들어가기 전우리는 단순히 상태를 관리할 때 useState를 사용해왔다. 하지만 여러개의 상태의 값을 구분 지어서 사용할 때가 있을 것이다. 그때에도 과연 useState만을 고집할 것인가? 그래서 오늘 그 문제를 해결해보고자 useReducer에 대해서 알아 볼 것이다.  목차1.  useReducer 란?2.  state, dispatch, initialState3.  사용방법 및 사용예제 1.  useReducer 란?- useReducer는 상태관리를 하는 hook으로 useState를 대체할 수 있다.- 복잡한 여러개의 상태를 다룰 경우 사용할 때 용이하다.- 비동기 처리시에도 가독성의 장점을 가질 수 있다. 2.  state, dispatch, initialStateuseReducer를 사용하..