소소한 코딩일지

Redux Toolkit (RTK)와 TypeScript를 활용하여 작성한 로직입니다. Redux Thunk Redux Store는 state의 변화에 따라 UI를 업데이트하기 위해서, 동기적으로 로직이 돌아간다. Redux Store에서 비동기적인 로직을 처리할 수 없기 때문에, Middleware를 추가하여 비동기적으로 처리되는 로직을 담당하게 한다. Redux Thunk는 Redux의 Middleware 중 하나로서, store와 상호작용하여 비동기적인 로직을 사용할 수 있다. 이번 프로젝트에서는 Redux Toolkit을 사용하기 때문에, configureStore 메서드 내부에 Redux Thunk가 기본적으로 세팅되어 있다. Create useSelector & useDispatch 우선 여러..

React에서 데이터는 일반적으로 위에서 아래(부모 컴포넌트 → 자식 컴포넌트)로 props를 통해 전달된다. 하지만 프로덕트의 크기가 커지고, 컴포넌트의 깊이가 깊어지면 Props의 사용이 번거롭게 느껴진다. Context를 활용하면 컴포넌트 사이에 이러한 값을 props 전달없이 공유할 수 있다. 언제 Context를 사용해야 할까 Context는 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안한 방법이다. 현재 로그인 상태, 테마, 현재 사용중인 언어 이러한 데이터를 자주 사용한다. // context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도 // 원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다. // light를 기본값으로 하는 테마 context를 만들어 봅시다..

프로젝트를 하면서 상태 관리 라이브러리인 Redux를 사용하게 되었다. 생소한 개념이라 Redux에 대한 키워드들과 규칙에 대해서 한번 정리해보려고 한다. 상태 관리와 상태관리 라이브러리 우선 '상태'는 컴포넌트 내부에 보이는 데이터뿐 아니라 웹 기능에 포함되는 모든 데이터를 말하며, '상태'를 관리하는 것을 '상태 관리'라고 한다. 그리고 이 상태 관리와 관련된 자원을 모아놓은 것이 '상태 관리 라이브러리'가 되겠다. Redux 리덕스는 리액트 생태계에서 가장 많이 사용되는 상태관리 라이브러리 중 하나다. 리덕스를 사용함으로써 우리는 두 가지 부분에서 장점을 가질 수 있다. 첫 번째는 컴포넌트 간 데이터를 전달하는 것이 편리하다. 상태 관리 없이 컴포넌트 간 데이터를 전달하는 방법으로 우리는 props..