React Router Dom의 유용한 기능 REACT ROUTER V6 REACT에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리 1. Path Variable (useParams) 2. Query String (useSearchParams) 3. Page Moving (useNavigate) 1. Path Variable (useParams) Diary 페이지 경로 : /diary 특징 : 어떤 일기를 보여줘야 할 지 전달 받아야 함 예 : /diary/1 -> 1번 일기 먼저 diary/1이라 경로를 입력하여보겠다. Path variable을 사용하려면 routes에서 path설정을 별도로 해주어야한다. :id 를 사용하여 뒤에 있는 인자를 전달하려는 것을 보여주면 된다. 그럼 다음과..

우선 새로 React Application을 하나 생성하였다. 우리는 이번에 React router라는 라이브러리를 사용할 것이다. React router 공식페이지에 접속해보자. https://reactrouter.com/ 우선 설치를 해보자. Read the Docs를 통해 Installation으로 접속해보자. https://reactrouter.com/docs/en/v6/getting-started/installation 그리고 아래의 명령어로 라이브러리를 설치해보자. npm install react-router-dom@6 그러면 package.json파일에 아래와 같이 설치가 잘 되어있음을 확인할 수 있다. 그럼 npm start로 구동시켜 보겠다. 그리고 Routing을 하기 위해 pages폴..

우선 페이지가 한 페이지로 구성되면 서비스하기도 힘들고 구성하기도 힘들다. 그래서 이번에는 3 페이지로 구성된 웹 어플리케이션을 만들어 볼 것이다. 그래서 먼저 웹 사이트 페이징에 먼저 알아보자. PAGE ROUTING Routing이란? 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 여기서도 데이터들이 어디로 가야할지 알려준다. 그래서 이 네트워크들도 실시간으로 최단거리를 계산해서 갈 수 있도록 한다. 이 경로(route)를 정해주는 장치를 ROUTER라고 칭한다. ROUTER : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 ROUTE + ING : 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 PAGE ROUTING이란? 웹페이지에 접속하는 것 ..

강사의 프로젝트 예시 링크이다. 접속하게 된다면, 우리가 만들 감정일기장의 예시가 있다. 이전에 배운 CRUD의 기능이 모두 탑재되어있으며, 우리는 일기를 작성하고 지우고 수정하며 읽을 수 있다. https://emotion-diary-winterlood.web.app/ 그럼 마지막으로 꼭 성공해보자!

DiaryList는 onCreate, onRemove, onEdit의 세개의 props를 받지만 빨간색같이 그냥 거쳐가기만 하는 prop들이 존재한다.(비효율적) (onDelete라고 했다가, onRemove로 바꾸는데 굉장히 많은 시간이 든다.) 전달만 하는 컴포넌트가 많이 생길 경우에는 props이름도 바꾸기가 어려워 지고 코드 작성과 수정에 악영향을 끼친다. 이런 상황에 props가 드릴처럼 땅을 파고 들어간다고 해서 props drilling이라고도 칭한다고 한다. 이는 부모에서 자식으로 데이터를 전달하는 단방향데이터흐름을 지키는 react를 사용하다보니 발생하는 문제라고 할 수 있다. 이를 해결하기 위해 Context를 오늘 배울 것인데, 아이디어는 다음과 같다. 1. 모든 데이터를 가지고 있는..

상태변화 로직을 가진 것들은 app component들이었다. 이들은 굉장히 길었었는데 많은 상태변화 처리함수들이 존재했었다. 이들은 컴포넌트 내에만 존재해야 했으며 - 그 이유는 상태를 업데이트 하기 위해서는 상태변화를 참조했어야했기 때문이다. (const에 존재하는 data를 onCreate, onEdit, onRemove에서 써야했기 때문에) 컴포넌트가 길어지고 무거워지는것은 좋지 않다. 그래서 이 복잡한 컴포넌트들을 바깥으로 분리해보는 방법을 한번 알아보자 useReducer - 컴포넌트에서 상태변화 로직을 분리하자. 먼저 useSate로 1부터 10000까지 더할 수 있는 Counter를 만들어보았다. useState를 사용하면 각각 count를 사용하여 다 만들어야했다. 이렇게 하니 compo..