<현록/>

리액트 리덕스 툴킷에서 비동기 통신하는 법은 두 가지가 있다: 첫번째는 일반적인 axios(또는 fetch)를 활용하는 것이고, 두번째는 createAsyncThunk를 활용하는 것이다. 본 글에서는 두 가지를 모두 이용하여 그 차이점을 설명하고자 한다. 비동기 통신하기 (1) axios 활용하기 // GetWeather.tsx // 중략... useEffect(() => { const getCurrentWeather = async () => { try { const position = await getLocation(); const { latitude, longitude } = position.coords; const weatherData = await fetchWeatherData(latitude, ..

[리팩토링 배경] 팀 프로젝트로 Open API를 활용한 날씨에 어울리는 칵테일 추천 서비스를 3주간 제작했었다. 당시 React-redux 소양이 부족하여 redux 없이 프로젝트를 구현했었는데, 이번 기회에 react-redux-toolkit 를 활용해 version.02로 프로젝트를 업그레이드 해보고, 리팩토링을 시도하며 얻게 된 인사이트를 정리해보고자 한다. 당시 구현한 기능과 본인이 담당한 기능은 다음과 같다: 1. 메인페이지 - 본인 참여 - 날씨에 어울리는 랜덤 칵테일 추천(재추천 기능 포함) - 칵테일 정보 구글 검색 연동 2. 메인페이지 칵테일 제조법 상세 페이지 3. 옵션 별 랜덤 칵테일 추천 페이지 4. 날씨 별 칵테일 모아보기 페이지 5. 칵테일 퀴즈 페이지 [개발환경] React...

항상 헷갈렸던 react-redux를 이번 기회에 복습해보았다. 대세로 자리잡은 react-redux-toolkit과 toolkit을 사용하지 않은 버전은 어떻게 다른지 비교해보고자 한다. 내용은 생화코딩 강좌의 리덕스편을 참고하였다. [리덕스란?] 리덕스는 리액트와 가장 많이 사용되지만, 사실 자바스크립트 기반이기만 하면 사용할 수 있는 상태관리 라이브러리이다. 상태는 오로지 읽을 수만 있고, 상태를 변경하기 위해서는 액션(action)을 발생시켜야 한다. [리덕스 툴킷이란?] 리덕스 툴킷은 리덕스에서 공식적으로 추천하는 helper 라이브러리이다. redux-devtools, redux-thunk 등의 라이브러리가 미리 포함되어 있다. 먼저 코드로 다른점을 파악해보자. [1. React-Redux] ..