개발놀이터

회사에서 리액트를 사용해서 어쩔 수 없이 리액트를 공부해야하는데 나름 재미는 있습니다. 근데 좀 그지같은 부분이 있더군요... 이번엔 포스팅에선 컴포넌트의 생명주기와 렌더링에 따른 useEffect의 호출 순서 그로인해 벌어지는 useEffect의 맹점에 대해서 알아보려고합니다.  그지같은 리액트...제가 원한건 useEffect에서 API를 호출하고 state에 저장한 뒤 state에 저장된 값을 HTML에 써먹고싶었습니다.  기대했던 순서는 다음과 같습니다.  리액트가 useEffect를 호출한다. API가 호출된다. 값이 가져와지고 그 값을 state에 저장한다. 렌더링이 될 때 state 값을 사용한다.  근데 이 그지같은 리액트는 제가 원하는대로 움직여주지 않더군요.  렌더링이 되고 state값..

이번 포스팅에선 리액트의 전역 상태 관리 라이브러리 redux와 recoil에 대해서 알아보도록 하겠습니다.  사용방법은 구글링하면 엄청많이 나오더라구요. 사용법은 이번 포스팅에선 다루지 않도록 하겠습니다. 이번 포스팅에선 hello world 수준으로 redux와 recoil을 써보고 느낀점 그리고 둘의 차이점에 대해서 다뤄보도록 하겠습니다.  Redux첫인상redux는 리액트 훅중에 useReducer와 굉장히 유사하더군요. 아니 유사한게 아니고 완전 빼다박았습니다. redux를 조금 경량화한게 useReducer라는 느낌이 들었습니다.  접근성redux는 보일러플레이트가 굉장히 높았습니다. 설정해줘야하는게 굉장히 많았고 hello world 수준의 예제도 시작하는데 한참이 걸렸습니다.  특징하지만 ..

최근 회사에서 리액트를 사용하면서 공부를 해야겠다고 생각이 들었습니다. 리액트의 생명주기나 useState, useEffect, useRef 같은 기본적인 hook은 자세히 공부하지 않고 감으로도 충분히 알겠더라구요.  하지만 회사 서비스에서 사용중인 코드 중에 useReducer라는 hook이 있었는데 이놈을 공부해보았습니다.  useReduceruseReducer는 useState를 대체하는 hook으로서 state, dispatch, reducer, initialize 이렇게 네가지로 이루어져있습니다.  기본적인 구조는 이렇게 생겼습니다.  const [state, dispatch] = useReducer(reducer, initialize);ex)const [number, sendValue] = ..