본문 바로가기

Computer Programming/[리액트를 다루는 기술]

[리액트를 다루는 기술]18. 미들웨어 비동기 작업 2 (thunk with API | connect() | createRequestThunk | loading module)
Computer Programming/[리액트를 다루는 기술] 2023. 7. 4. [리액트를 다루는 기술]18. 미들웨어 비동기 작업 2 (thunk with API | connect() | createRequestThunk | loading module) 1. 웹 요청 비동기 작업 처리하기 우선 api.js에 각 api를 모두 함수화해서 모아둔다. import axios from "axios"; export const getPostById = (id) => { return axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`); }; export const getUsers = () => { return axios.get(`https://jsonplaceholder.typicode.com/users`); }; 각 api를 호출하는 함수를 따로 작성하면, 나중에 가독성과 유지보수에 좋다. 이번 스터디에서 어떤 분이 이렇게 하나하나 작성하셨는데 이유가 있었다... 역시 민버지 다음은 thunk 함수를 생성..
[리액트를 다루는 기술] 18. 미들웨어비동기 작업 1 (react-actions | redux-logger | thunk 기본 사용법)
Computer Programming/[리액트를 다루는 기술] 2023. 7. 4. [리액트를 다루는 기술] 18. 미들웨어비동기 작업 1 (react-actions | redux-logger | thunk 기본 사용법) 1. redux-actions 사용하기 1) createAction import { createAction } from '@reduxjs/toolkit' const increment = createAction('counter/increment') let action = increment() // { type: 'counter/increment' } action = increment(3) // returns { type: 'counter/increment', payload: 3 } return 값을 참고하면 createAction을 통한 액션함수 생성이 훨씬 간결하다. 2) handleActions const initialState = 0; //꼭 객체일 필요는 없음. ({num : 0}도 상관없음) //..
[리액트를 다루는 기술] 17. 리덕스로 리액트 앱 상태 관리하기
Computer Programming/[리액트를 다루는 기술] 2023. 6. 27. [리액트를 다루는 기술] 17. 리덕스로 리액트 앱 상태 관리하기 이 책에서는 Ducks 패턴을 사용해 액션타입, 액션 생성함수, 리듀서 함수를 기능별로 하나의 파일에 몰아서 작성하는 방법을 사용하고 있다. 이렇게 카운터 기능 파일 1개, todo 기능 파일 1개를 만들어 각각 액션 타입, 액션 함수, 리듀서를 몰아넣는다. todos 모듈 만들기! // modules/todos.js //액션 타입 정의 const CHANGE_INPUT = "todos/CHANGE_INPUT"; const INSERT = "todos/INSERT"; const TOGGLE = "todos/TOGGLE"; const REMOVE = "todos/REMOVE"; //액션 생성 함수 export const changeInput = (input) => { return { type: CHANGE..
[리액트를 다루는 기술] 15. Context API 연습 w/ Vite
Computer Programming/[리액트를 다루는 기술] 2023. 6. 24. [리액트를 다루는 기술] 15. Context API 연습 w/ Vite 1. 프로젝트 생성 - Vite 지금까지는 CRA를 사용하여 리액트 프로젝트를 만들었었는데, 간단한 프로젝트에는 Vite 또한 많이 사용하고 있고 실제로 더 빠른 개발 서버를 시작시킬 수 있고 확장성이 좋다고 하여 이번 연습 프로젝트를 Vite로 구성했다. Vite란 Vue.js 프레임워크 제작자인 Evan You가 만든 빌드 도구로, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생했다. Webpack을 기반으로 한 CRA와 다르게 ES모듈을 기반으로 하여 다양한 기능을 제공하며 무엇보다 빠르다....! CRA는 불필요한 모듈도 전체 번들링을 하지만, Vite는 개별 파일이 모듈로 로드되고 캐싱되어서 초기 로딩 속도를 향상시킨다. 사용방법은 여기에! https://vitejs.dev/gui..
[리액트를 다루는 기술] 14. API 연동 뉴스 뷰어 (NavLink, useParams, usePromise Custom Hook)
Computer Programming/[리액트를 다루는 기술] 2023. 6. 24. [리액트를 다루는 기술] 14. API 연동 뉴스 뷰어 (NavLink, useParams, usePromise Custom Hook) Reference: 리액트를 다루는 기술 - 김민준 https://newsapi.org/s/south-korea-news-api 여기서 API를 연동하여 뉴스 뷰어를 만들어보자 한국 뉴스를 가져오는 API에 대한 설명서를 볼 수 있는데, axios로 fetch해온 후 보여주는 컴포넌트를 작성했다. 그러면 아래처럼 데이터를 볼 수 있는데, 이제 이 데이터를 가지고 화면에 잘 보여주면 된다. 이번에는 scss 전처리기 말고 styled-component를 활용할 예정이다. 이제 useEffect를 사용해서 컴포넌트가 처음 렌더링 되는 시점에 API를 요청하면 되는데 여기서 useEffect에 async를 붙이면 안된다. 왜냐면 useEffect 의 리턴값은 뒷정리함수이고 async는 Promise 객체를 반..
[리액트를 다루는 기술] 13. 리액트 라우터 (URL /:, 쿼리스트링, 라우트 중첩, useNavigate, Navigate)
Computer Programming/[리액트를 다루는 기술] 2023. 6. 20. [리액트를 다루는 기술] 13. 리액트 라우터 (URL /:, 쿼리스트링, 라우트 중첩, useNavigate, Navigate) 기존에 띄웠던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주는 SPA를 react router dom을 사용하여 구현해봤다. 1. 기본 사용법 index.js에 react router dom에 내장되어있는 BrowserRouter로 감싸야한다. 이 컴포넌트는 브라우저의 history API를 사용해 html을 새로 불러오지 않고도 주소를 변경하고, 현재 주소의 경로에 저장된 정보를 컴포넌트에서 사용할 수 있게 해준주는 역할을 한다. const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 2. URL 파라미터와 쿼리스트링 - URL 파라미터: /profile/nayoung3669 ..
React immer 라이브러리로 불변성 유지하기
Computer Programming/[리액트를 다루는 기술] 2023. 6. 20. React immer 라이브러리로 불변성 유지하기 객체의 구조가 깊어지면 자바스크립트 배열 내장 함수만으로 구현할 수는 있지만 복잡해질 것이다. 가독성을 높이기 위해 immer 이라는 라이브러리를 사용하면 구조가 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 데이터를 업데이트할 수 있다. => 불변성에 신경쓰지 않는 것 처럼 하지만 실제로는 불변성관리를 해주는 라이브러리. yarn add immer 아래의 코드를 immer을 사용해서 바꿔보자 import { useCallback, useRef, useState } from 'react'; import './App.css'; function App() { const nextId = useRef(1) const [form, setForm] = useState({ name: '', username: '..
react-virtualized를 사용한 렌더링 최적화
Computer Programming/[리액트를 다루는 기술] 2023. 6. 20. react-virtualized를 사용한 렌더링 최적화 올해 초 캐나다에서 코딩 공부한지 정말 얼마 안 됬을 때.... 백엔드 친구와 주식 관련 앱을 만들어보려고 했던 적이 있는데 주식 데이터가 실시간으로 너무 많다보니 렌더링이 느리고 성능도 매우 좋지 않았고 최적화를 잘 못하던 시절이라.. 그 시절 내 자신이 정말정말 답답했었다... 😅 아무튼 그때 너무 구현해보고 싶었는데 못 했던 부분이 주식 데이터를 보여줄 때 일단 유저에게 짠 하고 처음 보여지는 부분만 먼저 렌더링하고, 유저가 스크롤하거나 zoom하면 그때 필요한 정보를 가져와서 렌더링하는 기능이었다. 비슷한 로직의 라이브러리를 보니 감회가 새롭다 🤩 이번에는 스크롤 하면서 렌더링 되게 만들어 줄 예정이다 리스트 아이템의 크기를 먼저 재야하는데, 이 때는 두번째 요소부터 해야 테두리가 합쳐진 크기가 ..
[리액트를 다루는 기술] 11. 컴포넌트 성능 최적화
Computer Programming/[리액트를 다루는 기술] 2023. 6. 19. [리액트를 다루는 기술] 11. 컴포넌트 성능 최적화 1. React DevTools 성능 분석 툴로 몇 초 걸렸는지 측정할 수 있다. 리렌더링은 4.2ms 정도가 걸렸고 랭크 아이콘을 눌러보면 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬해서 보여준다. 그리고 아래쪽을 보면 변화를 일으킨 컴포넌트랑 관계 없는 컴포넌트들도 리렌더링된 것을 볼 수 있다. 이것들을 선택하면 어디부터 어디까지 렌더링이 몇 초 걸렸는지도 확인할 수 있다. 단순히 '느리다'라는 표현을 쓰기보다는 정확히 몇 초에서 몇 초로 단축되었는지 분석하고 해결하는 것이 중요하다..!! 불필요한 리렌더링을 어떻게 방지할 수 있을까? 2. React.memo -React.memo를 통해 props가 변경되지 않았다면 리렌더링 하지 않도록 설정할 수 있다. import React from 'react..

티스토리툴바