Code Playground

< h1 > Code Playground </ h1 >

useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); 대부분 useState hook으로 리액트의 상태 관리를 하게 되는데, 가끔 상태 로직을 상태 변화가 일어나는 컴포넌트로부터 분리시키고 싶을 때 useReducer를 유용하게 사용할 수 있다. useReducer는 주로 복잡한 상태 로직을 가졌거나 다음 state가 기존 state에 의존성을 가질 때 사용된다. 또한 useReducer를 사용하면 하위 컴포넌트에게 callback 함수가 아니라 dispatch 함수를 넘겨줄 수 있어 유지보수 관점에서 매우 편리해진다. (하위 컴포넌트들에게 계속 prop으로 전달, 전달, 전달을 할 필요가 없어지니까!) 사실 Redux의 ..

Kent C. dodds의 Epic React 강의에서 React hooks - useEffect: HTTP requests 챕터를 정리해보려고 한다. 일단 간단하게 API를 호출해서 화면에 API 응답으로 온 랜덤 강아지 이미지를 보여주는 예시를 만들어보려고 한다. const fetchRandomDog = (error) => fetch("https://dog.ceo/api/breeds/image/random").then((data) => { if (error) { throw error; } return data.json(); }); 그리고 에러가 나는 상황을 연출하기 위해 인자로 error가 넘어오면 error를 throw하고, 그 외의 경우에는 fetch받은 data를 JSON format으로 변환해..

정말 오랜만에 글을 쓰려고 블로그를 켰더니 너무 낯설다. 회사 일이 바쁘다는 핑계로 살짝 멀리했었는데 블로그야 미안... 회사 슬랙에 Kent C. dodds의 Epic React 강의에 관심있는 사람 있으면 같이 공동구매해서 듣자는 제안이 올라왔는데 쿨하게 회사에서 지원을 해줘서 공짜로 들을 수 있게 되었다. 🎉 강의 챕터는 요렇게 구성되어있다. 넘나 알찬 구성 🥰 React Fundamentals React Hooks Advanced React Hooks Advanced React Patterns React Performance Testing React Apps React Suspense Build an Epic React App Epic React Expert Interviews 오늘은 React ..