리덕스 환경에서 비동기 작업을 처리해 보자. 지난번 리덕스 툴킷 실습에서 사용했던 카트 예제를 그대로 사용할 것이다. 기존에 로컬 데이터로 가지고 있었던 카트의 데이터를 서버로 옮기고서 카트에 아이템을 추가하거나 제거해서 업데이트할 때 서버로 데이터를 보내고 처음 페이지를 로딩할 때는 서버에서 데이터를 가져오도록 만들어 보자. 리덕스에서 비동기 작업을 처리하는 법 여기서 카트는 상태로 존재하고, 이 상태를 업데이트하는 함수들은 전부 리듀서 함수다. 리듀서 함수는 순수함수이기 때문에 그 내부에서 사이드이펙트를 처리할 수 없다. 즉, 카트 상태를 서버에서 가져오는 작업을 지금 가진 리듀서 함수 내에 넣어둘 수 없다. 그러면 서버와 통신하는 작업을 처리할 코드를 어디에 둬야 할까? 더 많은 방법이 있지만 일단..
리액트 성능 최적화의 필요성 리액트에서 컴포넌트는 state, props, context가 바뀔 때, 그리고 부모 컴포넌트가 재실행될 때 재실행되고 재평가된다. 컴포넌트가 재실행된다고 해서 반드시 실제 DOM이 변경되는 것은 아니다. virtual DOM상에서 변경 사항을 감지할 때만 실제 DOM에 변경 사항이 반영된다. 그렇지만 변경할 필요가 없는 컴포넌트의 재실행 및 재평가는 리액트의 성능에 영향을 줄 수 있다. 특히 애플리케이션의 상위에 존재하는 컴포넌트가 재실행·재평가된다면 그 하위의 모든 컴포넌트도 재실행될 것이기 때문에 애플리케이션의 규모가 클 경우에는 이것이 성능에 안 좋은 영향을 줄 수 있다. 그래서 리액트에서는 성능 최적화를 위해 React.memo와 useCallback을 사용할 수 있..
리덕스 툴킷 무엇일까? 리덕스 툴킷은 리덕스를 좀 더 효율적으로 사용할 수 있게 만들어주는, 말 그대로의 도구 모음이다. 리덕스 툴킷을 사용하면 매번 상태 복사를 하지 않고도 불변성을 지키며 상태 업데이트를 할 수 있고, 상태를 여러 조각으로 만들어서 필요한 부분만 업데이트하고 사용할 수 있다. 이렇게나 편리한 리덕스 툴킷, 사용하러 가보자고!🙌 configureStore 먼저, 리덕스 툴킷에서도 createStore처럼 스토어를 만들어주는 메서드가 있다. configureStore가 그것인데, configureStore는 createStore와 비슷하지만 다른 점도 있다. 다른 점 중 하나는 configureStore가 여러 상태 조각들을 하나로 모아준다는 것이다. createSlice 애플리케이션 내..
이번주 내내 내 머릿속을 지배한 Context API.. 이제 블로깅을 하고 잠시만이라도 보내주자...🥲 Context API Context API는 리액트에서 제공하는 전역 상태 관리 도구다. 애플리케이션이 복잡해지고 너무 많은 상태가 있으면 상태 관리가 어려워지고 과도한 props drilling, 즉 후손 컴포넌트로 props 넘겨주기가 나타날 수 있다. Context API를 사용하면 전역에서 상태를 관리하며 필요한 컴포넌트에만 상태를 공급해 줄 수 있다. 다만 컨텍스트는 꼭 필요할 때만 써야 한다. 컨텍스트를 사용하면 컴포넌트의 재사용성이 떨어질 수 있다. 오직 props drilling을 막기 위해서라면 컴포넌트 합성이 더 좋을 수도 있다고 한다. Context API 사용하기 컨텍스트는 만들..
useEffect useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정한다. useEffect를 사이드이펙트를 다루는 훅이라고도 하는데, 사이드이펙트란 컴포넌트의 주요 목적인 화면에 렌더하는 것 이외의 효과를 말한다. 즉, ui를 생성하고 변경하는 것 이외에 애플리케이션에서 벌어지는 모든 변화를 사이드이펙트라고 할 수 있다. 예를 들면 http 요청을 보내거나, 타이머를 설정 및 관리하는 것 등이다. 다음과 같은 경우 useEffect가 유용하다. 1) 마운트/ 언마운트 시에 특정 함수를 실행하고 싶다면 2) 특정 값의 변화에 따라서 어떤 조작을 하고 싶다면 useEffect는 매개변수로 콜백 함수와 그 함수의 의존성을 담은 배열을 받는다. 의존성이란 무엇이 변했을 때 콜백 함수가 ..
props 컴포넌트 속성을 설정할 때 사용하는 요소로, 부모로부터 전달받은 값을 담고 있다. props는 객체 형태로, 어떤 형태의 값도 자유롭게 담아서 전달할 수 있다. 또, props는 읽기 전용이므로, 하위 컴포넌트에서는 수정하지 못한다. 이는 리액트에서 데이터 흐름이 top-down의 단방향 흐름이라는 것을 보여준다. 이런 특징 때문에 여러 컴포넌트에서 공유하는 데이터가 있다면 해당 컴포넌트들이 공유하고 있는 부모 컴포넌트에 데이터를 위치시키고 props를 통해 각 후손 컴포넌트들에 전달해야 한다. 실습하면서 useState를 어디에 둬야 할지 계속 헷갈렸는데 이 점을 꼭 기억하자! state 컴포넌트 내에서 계속 변하는 값이 state다. '상태'라는 것은 지속적으로 변화한다는 의미를 내포하고 ..
1. SPA(Single Page Application) SPA는 사용자가 느끼기에는 여러 페이지가 존재하는 것 같지만 실제로는 하나의 페이지인 것을 말한다. 멀티 페이지 애플리케이션 기반으로는 페이지를 이동할 때마다 매번 새롭게 리소스를 받아와 표시하지만 SPA는 html을 한번만 받아 오고 페이지 이동 시에는 변화가 필요한 부분만 새롭게 데이터를 받아 온다. 이렇게 페이지를 구성하면 사용자와의 상호작용이 많은 애플리케이션에서 속도가 향상되고 더 부드러운 페이지 업데이트가 가능하다는 장점이 있다. 그에 비해 처음 페이지를 표시할 때 거의 비어 있는 html 페이지를 받아 오고 나머지는 자바스크립트를 통해서 내용을 구성하다 보니 첫 로딩 시간이 길어질 수 있다는 단점도 있다. SPA에서 또 한가지 단점이..
