리덕스란? 리액트 상태 관리 라이브러리로 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있습니다. 리덕스 왜 쓸까? 예를 들어 아래와 같은 TodoList 프로젝트가 있다고 가정해보면 대부분의 작업에서 부모 컴포넌트가 중간자 역할을 하게 됩니다. 컴포넌트끼리 직접 소통하는 방법이 있긴 하지만, 그렇게 하면 코드가 꼬여버리기 때문에 권장하지 않는 방법이다. 이런식으로 App 컴포넌트를 거쳐서 건너건너 필요한 값을 업데이트하고, 리렌더링 하는 방식으로 프로젝트가 개발되면 부모 컴포넌트에서 모든걸 관리하고 아래로 내려주..

리액트에 대해서는 개인적으로 생활코딩님의 강의를 정독한 이후로 실무에서는 VUE만 사용하다보니 손놓은지 오래되었는데 간만에 리액트를 구현할 일이 생겨 간단하게 구현했다가 애를 먹은 상황을 공유하고자 합니다. 원하는 상황은 이렇습니다. 경로 /에서 /about경로로 갈때에 지연시간을 걸어 오래동안 대기를 하는 상황을 의도적으로 만들어 대기시간을 발생시키도록 합니다. 여기서 필요한 것은 리액트에 내장되어 있는 함수인 lazy, Suspense를 사용합니다. 그럼 lazy와 Suspense가 무엇인가에 대해 알아보자 React.lazy React.lazy는 코드를 분할하게 해줍니다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 앱 사용자들에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 ..