react

useReducer란 무엇일까? useReducer는 리액트에서 제공하는 상태관리를 위한 훅입니다. useState와는 다른 상태관리를 할 수 있다는 것이 장점인데요. 이 훅을 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있는게 장점입니다. 다른 파일에 작성 후 불러와서 사용할 수도 있습니다. useReducer의 구성요소 const reducer = (state,action) => { } const initialState = { } function App(){ const [state,dispatchFn] = useReducer(reducer,initialState); //이하생략.. } useReducer는 reducer 함수와 초기값인 initialState를 인자로 받아야 합니..

useReducer 우리는 react에서 useState로 상태관리를 할 수 있었고 이는 꽤 간단하다. 하지만 조금의 복잡한 상태를 다루어야 한다면 useReducer를 고려해보자 복잡한 상태의 경우 useState만을 사용하면 어려워지고 오류가 생길 수 있기 때문이다. 문제가 될만한 부분 다른 state를 기반으로 state를 업데이트 할 때 문제가 생길 수 있다. -> useReducer를 사용하는 것이 좋다. 하나의 state, 객체를 만들어서 보관할 수도 있지만 더 복잡해지기 때문에 잘 사용하지 않는다. 예시코드 const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn); useReducer 사용해보기 const [entered..

여러분들 리액트에서 useEffect를 사용하여 코딩을 하는데 useEffect가 2번 실행되어 난감 하셨던 적이 있으신가요? 저 또한 useEffect에서 데이터가 정상적으로 처리되었는지 확인하기 위해 콘솔 출력을 해보면 2번이 출력되는 문제가 있었습니다. 이것의 이유로는 다음과 같습니다. 1.React StrictMode - CRA에서 React Strict Mode 없기 cra로 프로젝트를 생성했다면 strict mode가 index.js에 적용되어 있을 텐데 이것을 제거하면 됩니다. 2. Next.js에서 React Strict Mode 없애기 next.config.js에서 reactStrictMode를 false로 바꿔주면 됩니다. strict 모드는 안전하지 않은 수명 주기, 레거시 API 사..

fetch나 axios로 data를 fetching 한다면 위와 같이 state를 만들고 데이터를 받아온 이후 setState를 이용해 데이터를 갱신해 주어야 할 것입니다. 타입스크립트를 적용한 프로젝트에서 위 같이 쓸 경우에는 state를 사용할 때 오류가 날 수 있습니다. state가 객체라면 state.value와 같이 접근할텐데 이 부분에서 타입스크립트가 오류로 감지합니다. useState({})만을 입력한다면 타입스크립트는 {} 만으로는 타입 추론을 할 수 없습니다. 만약 boolean과 같이 타입이 확실한 값을 주었다면 오류가 생기지 않습니다. 해결방법 any가 추가되면 문제가 해결이 됩니다. 혹은 위와 같은 Interface( 위의 코드와는 상관 없는 코드) 를 선언해서 대신 써주면 되는데 ..

리액트로 개발할 때 서버에서 데이터를 fetching하고 loading 처리를 하기 위해서 state와 fetch혹은 axios라이브러리를 이용한다. 이 일련의 과정을 단 코드 하나로 간편화 할 수 있으며 caching기능 까지 있는 react-query라는 라이브러리가 있다. import { QueryClient, QueryClientProvider } from "react-query"; root.render( ); 아직은 왜 provider형식으로 최상의 부모에게 위와 같이 해주는 진 모르겠다. 내 블로그는 아직 정보전달성 보다는 공부 기록 일기에 가까우니 이는 차후에 내 실력이 남에게 좋은 정보를 전달할 수준이 된다면 포스팅 할 것이다. const { isLoading, data } = useQue..

리액트 개발을 할 때 CSS를 적용하기 위해서는 따로 css파일을 만들어서 js, jsx 파일에 import하거나 인라인으로 지정해줬어야 했습니다. 전자의 경우는 파일의 개수가 늘어나고 클래스 네임을 일일이 붙여줘야 된다는 불편함이 있고 후자의 경우는 jsx방식으로 css스타일을 지정해줘야 한다는 불편함이 따르죠. 이것들을 해결해주고 조금더 리액트 스럽게 스타일을 적용할 수 있으며 여러 강력한 기능들을 제공해주는 styled-components를 소개합니다. styled-components 설치 npm install styled-components js 파일에 import import styled from "styled-components"; styled-components 사용법 const Box = ..

Recoil을 전역 상태관리 라이브러리로 리액트 친화적인 문법과 그 사용이 간편한 라이브러리로 CNU SW 아카데미 TA님에게 추천받은 상태관리 라이브러리이다. 리덕스는 그 이후에 사용할 것이기 때문에 우선, recoil의 사용방법에 대해 포스팅하고자 한다. 이 글을 읽으면 아주 기본적인 recoil 사용방법을 알게 될 것이다. Recoil 설치 npm install recoil RecoilRoot import React from 'react'; import { RecoilRoot, } from 'recoil'; function App() { return ( ); } recoil의 상태를 사용하는 컴포넌트는 부모트리 어딘가에 나타나는 RecoilRoot가 필요하다고 한다. 공식 홈페이지에서는 루트 컴포넌..

- 상태관리는 데이터를 전역적으로 관리하여 불필요한 렌더링을 줄이고 props drilling을 피할 수 있다. - 상태들이 복잡하게 얽혀있다 상호의존성이 높아UI가 어떻게 변하는지 알기 어렵다. 프로젝트가 커지고 state가 수십~수백개가 된다면 상태관리가 당연히 필요할 것이다. 1. context api 간단한 프로젝트에서는 props drilling을 피할 수 있는 좋은 대안이 될 수 있다. useReducer를 같이쓰는 경우가 많다. useReducer는 state를 한 곳에서 관리할 수 있게 한다. 2. redux 보일러 플레이트가 복잡하다고 하는데 redux toolkit으로 쓰면 더 쉽고 거기에 타입스크립트로 쓰면 큰 프로젝트 스케일링하기도 편하다고 한다. "제가 경험한걸로는 쇼핑몰 장바구니..