Lo9

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Page Routing에 대해 내용을 정리한다. 목차 1. Page Routing 이란 2. React Router Dom v6 사용하기 3. React Router Dom v6의 유용한 기능 Page Routing 이란 Routing이란 - 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 - 이때 데이터 경로를 Route, 데이터 경로를 실시간으로 지정해주는 역할은 Router 라고 함 Page Routing이란 - Browser에서 웹서버에 경로에 대한 요청을 보내고 웹 서버가 보내는 문서를 받아보는 과정 - 즉, 요청에 따라 어떤 데이터를 돌려줄지 결정하는 과정 - Page Routing은..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 useReducer, useContext를 사용한 프로젝트 정리 대해서 수강하고 내용을 정리한다. 목차 1. useReducer - 복잡한 상태변화 로직 분리 2. useContext - 컴포넌트 트리에 데이터 공급 useReducer - 복잡한 상태변화 로직 분리 simple-diary 프로젝트에서 App 컴포넌트에는 많은 상태변화 함수가 존재한다.(ex. getData, onCreate, onRemove 등) 복잡하고 긴 상태변화 로직을 컴포넌트 밖에 정의하여 컴포넌트 코드를 좀 더 단순히 만들 수 있다. // reducer 함수 // switch문을 통해 action.type을 확인하여 상태변화 처리 // re..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 최적화 부분에 대해서 수강하고 내용을 정리한다. 목차 1. useMemo( ) - 연산 재사용하기 2. React.memo( ) - 컴포넌트 재사용하기 3. useCallback( ) - 함수 재상용하기 useMemo( ) - 연산 재사용하기 컴포넌트들을 작성하다 보면 한 번 연산한 이후 계산할 필요가 없을 때가 있다. 이때 연산 결과를 재사용하므로써 연산을 줄일 수 있다. 이를 Memoization이라 부르고 이는 프로그래밍 기법에 가깝다. 즉, Memoization은 계산 해둔 연산의 결과 값을 기억해 두었다가 동일한 계산을 시키면, 새로 연산하지 않고 결과 값을 반환시켜 연산을 줄이는 것이다. simple-da..