상태관리

React-Query vs SWR

블로그 이전하였습니다. React-Query vs SWR 비슷하지만 다른 react-query와 swr를 컨셉을 이해하며 비교해보자 yoon-hae-min.github.io 기존 글 서론 둘이 비교하기 앞서 왜 이런 라이브러리를 쓰는지부터 보고 가자 React에서 서버로부터 데이터를 가져오거나 전송해야할때 fetch Api를 사용하거나 axios를 사용하고는 한다. 이를 사용해서 충분히 서버와 데이터를 주고받을 수 있으나 규모가 커지면서 데이터 처리, 에러핸들링과 같은 부가적인 요인들이 많아지게 된다. 직접 구현해도 되지만 라이브러리를 이용해서 좀 더 쉽게 처리할 수 있다. 공통점 1. 데이터 요청 및 관리를 하기 쉽게 만들어 준다. 2. 캐시를 통해 api 호출을 줄이고 성능(UX)를 향상할 수 있다...

React query를 사용하면 전역 상태가 필요없다?

블로그 이전하였습니다. React Query를 사용하면 전역 상태가 필요없다? React Query를 사용하면서 생긴 오해와 진실 yoon-hae-min.github.io 기존 글 처음 React query를 사용하면서 잘못된 개념을 하나 가지고 갔었다. React-query를 사용하면 전역 상태가 필요 없다는 것이었다. 애초에 개념이 다른 말인데 왜 이렇게 생각했는지에 대해서 풀어보고자 한다. 프론트엔드 개발에서 꼭 필수적인 것이 state 즉 상태이다. 상태를 주관적으로 정의를 내려본다면 사용자와 상호작용하기 위해 동적으로 변하는 데이터를 말할 수 있다. 이 상태에 따라 UI를 적절하게 보여주도록 설정하는 것이 상태 관리인 것이다. 하지만 상태가 복잡해지고 다양화 됨에 따라 하나의 상태가 영향을 미치..

React 상태관리와 불변성

react의 상태를 관리하다보면 불변성을 지켜서 사용하라고들 한다. 굳이 데이터를 추가할때도 array.push(5); 위의 push방법이 아닌 newArray=[...array, newData]; 이런식으로 spread 방법을 사용해서 데이터를 넣고 한다 이는 불변성을 지키려고 일부러 이런 방법으로 사용한다. 불변성 불변성부터 이야기해보자면 값이나 상태를 변할수 없는것이다 즉 새로운값이 생기면 상태를 변경해주는 것이아니라 새로 할당하는 것을 말한다. 대표적으로 원시타입이 이렇게 동작한다 let a = 3; //원시타입 3이라는 변수를 할당했다 let a = 5; 5로 변경을 하면 메모리에서는 a라는 변수에 5를 다시 할당하게된다 이는 불변성을 지키고있는 것이다. 원시타입이 있으면 참조타입도 있다 let..

props로 modal관리는 이제 그만

페이지로 만들기는 싫고 간단한 창을 띄워 한 페이지 내에서 유저의 접근을 받고 싶을 때 modal을 애용해 왔다 새 페이지를 왔다 갔다 하는 것보다 좀 더 한 템포 빠르게 유저와의 상호작용이 일어나 좋아했다. Modal 동작원리 modal을 동작하게 하는 방법에는 크게 2가지가 있다 modal open close시에 dom에 직접 component를 넣다 빼는 방법 css의 visible을 이용해서 modal이 안보이는 것처럼 보이게 하는 방법 1번의 방법은 open close마다 component를 랜더링 한다는 의미는 modal전체를 다시 그려야 한다는 것이므로 modal이 커질수록 open close시에 반응이 늦어진다는 이야기이다. 그래서 대부분의 modal창에서는 2번 방법을 사용한다. Moda..