상태관리
-
React-hook-form 이란?React-hook-form 2024. 11. 12. 22:29
이 글은 지금까지 사용했던 라이브러리 중 당연 최고라 생각하는 리엑트훅폼의 사용후기를 공유하고싶은 마음에 쓰게 된 글입니다. 이게 뭡니까? 한 마디로 정리하면 Form 관리를 위한 강력한 도구라고 말할 수 있다. 혹시 아래와 같은 상황을 겪었거나, 상대를 당황시킬 예정이라면 최고의 선택이 될 수 있다. 물론 극단적인 예시이다. (보통 많은 관심사나, 쓰임, 목적에 알맞는 상태들은 하나의 객체로 다룬다.) 많은 상태를 한번에 전부 다룬다는 것은 효과적이지 않다. 왜 효과적이지 않을까? 렌더링 때문이다. 렌더링은 쉽게말하면 지금 보여지고있는 모니터의 화면을 어떻게 구성할지, 설명할지 요청하는 프로세스이며, 함수의 실행이다. function Counter() { // 음~ 무엇을 그릴까요 const [..
-
React-Query를 사용해보자React-query 2024. 11. 9. 20:42
프론트를 공부하면서 자주 듣는 단어였던 '상태관리' 에 관하여 와닿지 않을시점, 프로젝트를하며 너무나도 많은 useState와 서버상태까지 관리하며, 동시에 화면에 렌더링하기위한 수많은 useEffect에 지칠 시점, 리엑트쿼리에 대하여 알게되었다. 그때의 내가 봤으면 좋았을 만한 것들을 작성해 보고 싶었다. 서론 1. 보일러 플레이트서버에서 하나의 data를 가지고온다고 가정해보자.const [data. setData] = useState(null)const fetchData = async () => { const res = await axios.get('/api/data'); setData(res.data); }res에는 호출한 데이터가 담겨있을 것이다. 그러나 이 데이터가 완벽하게 도착할 순..