본문 바로가기

React49

리액트 라우터 적용해서 페이지 전환하기 리액트 라우터 적용해서 페이지 전환하기 오늘은 리액트 프로젝트에 리액트 라우터 패키지를 설치하여 적용해서 페이지를 전환해보았다. 리액트 라우터는 공식문서(https://reactrouter.com/en/main)에서 참조할 수 있으며, 패키지 설치 시 npm install react-router-dom 명령어로 설치가 가능하다. 위 코드는 react-router-dom 라이브러리에서 라우터를 사용하기 위해 createBrowserRouter 함수와 RouterProvider를 불러오고, router라는 이름의 상수에 createBrowserRouter 함수를 적용했다. 이 함수는 배열을 가지는데, 배열 내에 전환할 페이지를 객체로 만들어둘 수 있다. 객체 내에는 웹사이트 링크 뒤에 사용할 이름인 path.. 2023. 7. 4.
리덕스 프로젝트에서 thunk의 사용 리덕스로 상태관리 한 프로젝트에 비동기코드로 데이터 주고받기 오늘은 저번 수업에서 리덕스로 상태관리한 프로젝트에 비동기코드로 데이터를 전송하여 덮어씌운 것을 thunk를 사용하여 코드의 추가 및 수정을 통해 주고받는 방식으로 전환하여 새로고침을 해도 사용자가 저장한 데이터가 초기화되지 않도록 해주었다. thunk는 리덕스에서 비동기 작업을 처리하기 위한 미들웨어이다. 리덕스는 기본적으로 동기적인 작업을 처리하는 액션과 리듀서를 중심으로 구성되는데, 실제 애플리케이션에서는 API 호출, 비동기 작업, 외부 데이터 가져오기 등의 비동기 동작이 필요한 경우가 많다. 여기서 thunk는 액션 크리에이터가 일반적인 액션 객체 대신 함수를 반환할 수 있도록 해준다. 이 함수는 비동기 작업을 수행하고, 필요한 경우 .. 2023. 7. 3.
리덕스로 관리한 프로젝트에 비동기코드 적용하기 리덕스로 관리한 프로젝트에 비동기코드 적용하기 오늘은 어제 만든 프로젝트를 조금 수정하고 보강하여 비동기코드까지 적용해보았다. 리덕스로 상태를 관리할 때는 직접적인 상태변경은 해선 안되기 때문에 비동기코드를 적용할 때에도 그 점에 유의하여 적용해야 한다. 지금 진행하는 프로젝트는 리덕스툴킷이 적용된 상태로, 비동기코드를 적용하여 상태를 변환하는 코드를 작성하더라도 immer 라이브러리에 의해 상태변경을 막을 수 있지만, 이 경우에도 리듀서함수 내부에서 코드를 작성하는 것보다 별도의 공간에 코드를 작성해주는 것이 좋다. 그래서 최상단 컴포넌트에 해당하는 App 컴포넌트에 비동기함수를 적용했다. 우선 여러 코드들이 합쳐져 있는데, 이는 notification이라는 컴포넌트의 출현에 관련된 디스패치함수들이다... 2023. 6. 29.
새로운 부분으로 넘어가기 전 복습하기 리덕스와 리덕스툴킷 복습하기 오늘은 리덕스에 비동기 코드를 넣는 방법에 대한 것을 진행하기 전에 리덕스와 리덕스툴킷 사용에 대한 전반적인 복습 차원에서 새 프로젝트를 진행했다. 그저께 이 부분을 시작했지만 수업의 숙제로 모든 기능을 만들어보는 게 주어져서 만들긴 했는데 1~2개의 기능이 해결이 안되서 오늘 처음부터 다시 만들면서 포스팅이 늦어지게 되었다. 위 이미지가 오늘 처음부터 다시 만든 프로젝트이다. 아래 흰색박스의 메뉴에서 add to cart 버튼을 누르면 헤더의 카트숫자가 올라가고, 이 카트버튼을 누르면 회색박스의 카트가 나오는 식의 기능이 들어가있다. 이 박스에서도 +와 - 버튼을 누르면 메뉴의 수를 조정할 수 있다. 이 프로젝트 진행을 위해 ui를 담당하는 슬라이스와 cart를 담당하는 슬.. 2023. 6. 28.
리덕스의 핵심 원칙, 리덕스툴킷으로 코드정리 리덕스의 핵심 원칙 리덕스의 핵심 원칙 중 하나는 불변성 유지이다. 이는 기존의 상태를 직접 변경해서는 안되고, 새로운 상태 객체를 생성하여 업데이트해야한다는 것을 뜻한다. 이를 위해 리덕스에서는 순수 함수인 리듀서를 사용한다. 리듀서는 이전 상태와 액션을 받아 새 상태를 반환하는데, 이때 이전 상태는 바뀌지 않고 유지되며, 리듀서는 이를 바탕으로 새 상태를 생성하여 반환한다. 따라서 카운터의 상태를 증가시키는 액션을 처리하는 리듀서는 return state.counter++ 식으로 간소화된 연산자를 사용하면 상태를 직접적으로 변경시키기 때문에 사용해선 안되고, return state.counter + 1 식으로 작성해야 한다. 이렇게 불변성을 유지하여 업데이트하면 상태 변화를 추적하고 예측 가능한 관리.. 2023. 6. 23.
리액트 앱에 리덕스 적용하기 리액트 앱에 리덕스 적용하기 어제 리덕스에 대해 알아봤다면 오늘은 리액트 앱에 리덕스를 적용해보는 시간을 가졌다. 위 이미지는 Increment, Increment by 5, Decrement 버튼을 누르면 가운데 숫자가 1씩 올라가거나 5씩 올라가거나 1씩 감소하는 리액트 앱이다. 리덕스 파일은 어제 만들어본 파일의 구조와 비슷하다. 다른 점이 있다면, 오늘은 리액트 앱에 적용하는거라서 노드JS 명령어를 통해 불러오지 않고, import 구문으로 불러왔다. 숫자가 5씩 증가하는 리듀서함수 구문은 기존 상태값에 액션의 amount 값을 더한 값을 반환하도록 했다. state.counter + 5 처럼 할 수 있지만 하드코딩보다 사용자가 입력한 값을 기존 상태값과 더하는 것이 더 좋기 때문이다. 여기서는 .. 2023. 6. 20.

티스토리툴바