Act99 기술블로그

1. 전역 상태 관리는 언제할 것인가? React에서는 useState 훅을 이용해 지역 상태 관리를 할 수 있다. 컴포넌트 안에서, 혹은 props로 전달할 때 만 자식 컴포넌트에서 사용할 수 있다. 또한 모든 상태 관리를 props drilling 으로 하나씩 내려주어 전역의 모든 상태관리를 진행할 수 있지만 props drilling 지옥에 빠질 수 있다. 이 때 전역 상태 관리 도구 Context API 와 Redux 등과 같은 도구들을 사용할 수 있다. 2. Context API 특징 Context API 는 React 자체에 내장 기능이기 때문에 React 에서만 사용할 수 있다. 이는 Entry 파일에서 구성한 Provider 을 내려주는 형식이며, 사용하고자 하는 컴포넌트에서 작성한 Dis..

이 글은 회고록입니다. 항해99 3주차 주특기 기본주차의 2일차가 되었다. Redux 상태관리와 DB 연결 , useEffect를 통한 렌더링을 완료시킨 상황이다. 오늘의 결과물을 대략 이렇다. 현재 상태관리하는 것은 날짜 데이터, 다이어리 데이터, 기분을 나타내는 하트 데이터 총 3가지이다. DB 역시 이 데이터로만 구성되어있다. 캘린더 클릭 시 날짜의 State가 RootState 에 저장되며, 다른 날짜를 클릭 시 데이터가 dispatch된다. 글쓰기 컴퍼넌트는 모달을 이용했다. 하트를 클릭하거나 일기를 작성할 때 역시 State 가 RootState에 저장되며, State는 event의 value가 변화될 때마다 변한다. 그리고 저장버튼을 클릭 시 홈 화면으로 넘어가고, 해당 데이터가 보인다. 하..

이번에 할 것은 Redux & RTK 를 이용해 유저가 선택한 코인의 상태를 관리하는 Select Box를 만들 예정이다. 먼저 상태관리를 위해 Redux Toolkit 을 이용해 state 와 reducer를 만들어주었다. import { createSlice, PayloadAction } from "@reduxjs/toolkit"; export interface CoinState { value: string; } const initialState: CoinState = { value: "BTC", }; export const selectedCoinSlice = createSlice({ name: "selectedCoin", initialState, reducers: { selectedCoin: (st..

이번에는 코인 차트를 만들 차례이다. 먼저 해야할 일은 RTK Query 를 이용해 api 데이터를 가져오는 일이다. - services/cryptoApi.ts import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; const cryptoApiHeaders = { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": process.env.REACT_APP_CRYPTO_API_KEY, }; const baseUrl = "https://coinranking1.p.rapidapi.com"; const createRequest = (url: string) => ({ u..

오늘은 코인 API 를 가져와 실시간 데이터를 가져오는 작업을 할 예정이다. 결론부터 얘기하면 Redux에 대해 더 공부할 필요성을 느꼈다. (Redux 사용하기 위한 빌드가 꽤 난해하다고 생각했기때문. 또한 docs를 봐도 잘 이해가 되지 않는다. 다만 튜토리얼을 진행하고 직접 사용해보면서 내가 느꼈던 *Props 처리하는데 너무 많은 코드들이 들어간다* 라는 점을 해결하는 툴이라는 것.. ) 그리고 이번에 사용한 것은 Redux toolkit 중에서 RTK Query 이다. 코인 데이터를 가져오기 위해 Rapid API 에서 api-key 와 url 을 제공받았다. https://rapidapi.com/Coinranking/api/coinranking1 Coinranking API Documentat..