Dev/React.js
-
React Query 소개 및 사용하기Dev/React.js 2023. 3. 9. 02:43
'카카오페이 프런트엔드 개발자들이 React Query를 선택한 이유'라는 재미있는 칼럼을 보게 되었다. 요즘 들어 프런트엔드 진영에서 API통신 후, 데이터 관리를 하는 부분에 대해서 React Query를 많이 이용하는 추세인 것 같다. 최근에 관심이 생긴 React Query를 공부하기 앞서 전반적인 이해도를 키울 겸 해당 칼럼을 보면서 정리하고자 한다. 시작하기 앞서 카카오페이에서는 React Query를 도입하기 전에는 Redux를 주로 사용했다고 한다. 리덕스의 장점은 전역상태를 관리하는데 도움 되고, 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 더 쉽게 이해할 수 있다는 ..
-
초보자들이 자주 실수하는 리액트 훅 Top 6Dev/React.js 2023. 3. 8. 01:49
Youtube를 보다가 'Top 6 React Hook Mistakes Beginners Make' 라는 관심을 가질 만한 영상을 찾았다. 이 영상을 보고 나는 얼마나 실수를 하고 있으며, 실수를 하고 있다면 고치기 위하여 해당 내용을 정리하면서 포스팅하기로 하였다. 리액트 훅은 기본적으로 알고 있다고 생각하고 진행하겠다. 1. Using state when you don't need it import React, { useState } from "react"; function Mistakes() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); function onSubmit(e) { e.prev..
-
useState와 useReducer 둘 중 무엇을 사용해야 할까?Dev/React.js 2023. 3. 5. 19:11
1. useState 리액트에서 상태관리라고 하면, 가장 먼저 떠오르는 hooks 중 하나로 useState를 뽑을 수 있다. 컴포넌트에서 state를 동적으로 관리하기 위해서 자주 사용되는 함수이다. // 사용방법 const [state, setState] = useState(initialState); // 예시 const [name, setName] = useState(""); // 초기값 console.log(name); // '' // name state 재할당 setName("박레고"); // 랜더링 이후 console.log(name); // 박레고 setName함수를 통해 name의 값을 변경해줄 수 있다. setName은 상태 값을 갱신해주는 Setter 함수라고 한다. 2. useRedu..