기록하고 싶은 것들

기존에 구현했던 페이지 기능에서, 추가적으로 url에서 params나 query를 가져오는 기능을 구현하였다. 기존 기능에서는 정해진 url로만 이동하였다. 예를 들어 /diary 는 인식하였지만 , /diary/123 는 인식하지 못하였다. diary는 고유의 id를 부여할 예정이므로 Route를 아래와 같이 수정을 해주었다. 코드를 변경함으로써, parameter를 붙여서 다이어리 id를 지정해서 이동할 수 있게 되었지만, 페이지 내부에서는 그 id를 알 수가 없다. 따라서 useParams를 사용하여서 id를 인식할 수 있게 해주었다. id가 10인 것을 console로 통해서 다시 확인해주고 있다. 이후 query의 경우도 useSearchParams를 이용하여 query내부의 값들을 가져올 수 ..

기존에 만든 일기장을 바탕으로, 배포가 가능한 감정일기장을 제작하기로 하였다. 감정 일기장을 제작하기 위해서 프로젝트에 react-app을 설치해주었고, 기본적으로 일기장에 필요한 페이지들을 생성해주었다. Home: 기본 홈 페이지 Diary: 다이어리 세부 내용을 볼 수 있는 페이지 New: 새로운 다이어리를 작성하는 페이지 Edit: 다이어리를 수정하는 페이지 위 4개의 페이지를 생성해준 뒤에, react-router-dom을 이용하여 각각의 페이지로 이동가능하게 Route 기능을 연결해주었다.

단방향 데이터 흐름인 React를 사용 시, props를 전달만 하는 컴포넌트가 발생하고 props의 작성과 수정도 어려워짐(props drilling) useContext의 아이디어 컴포넌트에 모든 데이터를 주고, 하위 컴포넌트에 직접 원하는 데이터들을 주어 props drilling을 없앰 useContext 예시 reateContext 내부에 공유하길 원하는 데이터의 초깃값을 넣어두고 value 변수로 묶어준다. UserContext.Provider로 감싼뒤 ,value props에 value를 넣어줌 import React, { createContext, useMemo, useState } from 'react'; import Parent from './Parent'; export const Us..

state의 상태변화 로직이 복잡해질 경우 컴포넌트가 무거워짐, 이는 좋은 현상이 아니기 때문에 로직을 바깥으로 분리하여 관리하기 위해서, useReducer를 사용하는 것이 좋음 useReducer useReducer 예시 const [count,dispatch] = useReducer(reducer,1) //count: state와 동일 dispatch: 상태를 변화하는 action을 발생시키는 함수 //reducer : 일어난 상태변화를 처리 1 : count state의 초기값 실제 코드 적용 예시 useState -> useReducer 사용 import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./..

onCreate 함수를 props로 받는 컴포넌트가 삭제시에도 리렌더링 되는 현상 발견 React.memo의 경우 얕은 복사로 리렌더링을 방지하므로, 함수를 인자를 받을 때는 useCallback()이라는 리액트 훅을 사용 useCallback https://ko.reactjs.org/docs/hooks-reference.html#usecallback App.js의 onCreate 함수를 useCallback으로 설정 한 뒤, 일기 삭제 후의 console을 관찰 -> 리렌더링 되지 않음 하지만, 글을 추가한다면 기존의 글들이 모두 사라지고 새롭게 쓴 글만 나온다. 왜 그런것일까? 그 이유는 useCallback의 dependency array를 공백으로 주었기 때문이다. 처음에 마운트 될때의 data는..

고차 컴포넌트 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 React.memo React.memo는 고차 컴포넌트(Higher Order Component) 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing) 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용 하지만, 자기 자신의 state 변경 시에는 리렌더링 React.memo 실습 CountView , TextView를 생성한 뒤, state가 변경될 때마다, 컴포넌트가 리렌더링 되는 빈도를 알아보았다. count를 증가하니, count를 사용하지도 않는 TextView에서도 렌더링이 발생하는 것을 볼 수 있었다. TextView에 React.m..