Front-End/React23 [ React ] React 실전 ② 프로젝트 기초 공사 2 [ 상태 관리 ] 일기 데이터를 관리할 state를 App 컴포넌트에 작성하기 App.js import React, { useReducer, useRef } from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import "./App.css"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Edit from "./pages/Edit"; // COMPONENTS import MyButton from "./components/MyButton"; import MyHeader fro.. 2022. 11. 3. [ React ] React 실전 ② 프로젝트 기초 공사 1 [ 폰트 세팅 ] Open Font License : 글꼴 및 관련 소프트웨어용으로 특별히 설계된 무료 오픈 소스 라이선스 구글 폰트 : https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 폰트를 적용하는 방법은 App.css에 import를 해주면 된다. App.css @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap"); .App { padding: 20px; text-align: center; fo.. 2022. 11. 2. [ React ] React 실전 ① 페이지 라우팅 [ 페이지 라우팅 - REACT SPA & CSR ] Routing : 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 전송하는 데이터들은 네트워크 장치를 거쳐서 이동을 한다. 네트워크 장치들은 자신에게 도착한 데이터들이 실시간으로 어디로 가야하는지 다음 네트워크 장치를 알려준다. 최대한 빨리 갈 수 있도록 실시간으로 경로를 지정해준다. Router : 데이터의 경로를 실시간으로 지정해주는 역할을 한다. Routing : 경로를 정해주는 행위 자체와 그런 과정들을 다 포함해서 일컫는 말 인터넷을 사용해서 웹 사이트에 접속한다는 것은 브라우저를 통해서 웹 서버에 경로 요청을 날리고 그 경로에 해당하는 웹 문서를 받아보는 과정이다. 페이지 라우팅 : 요청에 따라 어떠한 페이지를 돌려줄지.. 2022. 11. 2. [ React ] React 기본 ⑨ 컴포넌트 트리에 데이터 공급하기 - Context [ 리액트 컴포넌트 트리에 전역적으로 데이터를 공급하는 context API 다루기 ] 지금까지 만든 일기 프로젝트의 계층 구조 DiaryList 컴포넌트는 App 컴포넌트로부터 DiaryList, onDelete, onEdit의 총 3개의 prop을 받는다. 하지만 onDelete와 onEdit 함수는 DiaryList 컴포넌트에서 사용하지 않고 거쳐 지나가는 용도이다. 전달만 하는 prop가 많을 경우는 코드 작성과 수정에 상당한 악영향을 미치게 된다. 이렇게 부모 컴포넌트로부터 자식 컴포넌트로 전달만 하는 props를 props drilling이라 한다. props drilling을 해결하기 위해 context가 생겼다. context의 개념은 모든 데이터를 가지고 있는 컴포넌트가 provider라.. 2022. 10. 23. [ React ] React 기본 ⑧ 복잡한 상태 관리 로직 분리하기 - useReducer [ 상태 변화 로직 분리하기 ] App 컴포넌트에는 다양한 상태 변화 함수가 존재한다. 이러한 상태 변화 함수들은 컴포넌트 내에서만 존재할 수 있다. 왜냐하면 상태를 업데이트 하기 위해서는 기존의 상태를 참조해야하기 때문이다. 컴포넌트의 복잡하고 긴 상태변화 로직을 컴포넌트 바깥으로 분리하는 기능인 useReducer를 사용한다. useReducer는 리액트의 상태 관리를 돕는 React Hooks이다. * React Hooks : 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 가져와서 사용할 수 있도록 해주는 기능 [ useReducer ] useState를 사용하면 여러 개의 상태 변화 함수를 모두 같은 컴포넌트 안에 작성해야 되서 컴포넌트의 코드가 길고 복잡해진다. 이러한 방법은 매우 좋지 않다. .. 2022. 10. 22. [ React ] React 기본 ⑦ 최적화 - 최적화 완성 [ 일기 데이터 하나를 삭제할 때 나머지 아이템 전부에서 리랜더링이 발생하는 문제를 해결하기 ] 아이템이 여러 개 있거나, 사진이나 동영상을 랜더하게 되는 경우 메모리를 심하게 낭비하게 된다. DiayEditor는 App 컴포넌트로부터 받은 2개의 함수와, 5개의 데이터를 prop으로 받는다. 그 중 일기 아이템을 수정해서 변화할 수 있는 content를 제외한 나머지는 변화할 수 없는 데이터이다. 그렇기 때문에 onEdit, onDelete, content 3개에 집중해서 최적화를 하면 된다. 1. 최적화의 시작은 React.memo로 컴포넌트를 묶어주는 것이다. React.memo : 리랜더링 되지 않았으면 하는 컴포넌트를 전달해준다면 props가 바뀌지 않는 이상 리랜더링되지 않은 강화된 새로운 컴.. 2022. 10. 22. [ React ] React 기본 ⑦ 최적화 - useCallback [ 일기 컴포넌트를 최적화하기 ] 컴포넌트를 최적화하기 위해서는 어떤 컴포넌트가 최적화의 대상인지 알아내야한다. 1. DiaryEditor 컴포넌트 최적화하기 컴포넌트는 본인이 가진 state의 변화가 생겼거나, 부모 컴포넌트에서 리랜더링이 일어나거나, 전달받은 prop이 변경되는 경우 리랜더링이 일어난다. DiaryEditor는 onCreate 함수를 prop으로 전달받는다. onCreate는 일기 저장하기 버튼을 눌렀을 때, data에 일기 아이템을 추가하는 역할을 한다. React.memo을 사용해서 DiaryEditor 컴포넌트를 최적화한다. * React.memo()에 리랜더링되지 않았으면 하는 컴포넌트를 전달해준다면 props가 바뀌지 않는 이상 리랜더링하지 않은 강화된 새로운 컴포넌트를 돌려.. 2022. 10. 22. [ React ] React 기본 ⑦ 최적화 - React.memo [ 컴포넌트를 재사용하기 위한 React.memo ] 컴포넌트가 자신과 관련 없는 부모 컴포넌트에 의해 리랜더되어 자신도 업데이트가 된다면 성능상에 문제가 된다. 낭비를 방지하기 위해 자식 컴포넌트에 조건을 걸어놔야 한다. 그러면 부모 컴포넌트가 state가 업데이트되는 등 리랜더링이 되었을 때 업데이트 조건에 따라 일치하는 자식 컴포넌트만 같이 렌더링이 된다. React.memo 기능을 통해 함수형 컴포넌트에게 업데이트 조건을 걸 수 가 있다. * 리액트 공식 문서 확인하기 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org Re.. 2022. 10. 22. [ React ] React 기본 ⑦ 최적화 - useMemo [ 리액트 어플리케이션 성능 최적화를 위한 연산 결과를 재사용 ] 해당 일기 데이터를 분석하는 함수를 제작하고, 해당 함수가 일기 데이터의 길이가 변화하지 않을 때, 값을 다시 계산하기 않도록 하기 → Memoization 기법을 적용한 연산 최적화 Memoization : 이미 계산해본 연산 결과를 기억해두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해 두었던 데이터를 반환시키게 하는 방법 → Memoization을 이용해서 연산 과정을 최적화할 수 있다. [ Memoization이 필요한 상황 만들어보기 ] App 컴포넌트에 data state가 가지고 있는 일기들 중에 emotion에 따른 함수를 만들어보기 App.js import { useEffect, useRef, useState } .. 2022. 10. 15. 이전 1 2 3 다음
