일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 태그된 유니온
- webpack
- CI/CD
- CORS
- dfs
- async/await
- ESlint
- 투포인터
- 호이스팅
- React
- 타입 좁히기
- recoil
- 반공변성
- 리터럴 타입
- tailwind
- 공변성
- 무한 스크롤
- 이분 검색
- SSR
- autosize
- Promise
- TS
- 결정 알고리즘
- Jest
- Cypress
- 인터섹션
- app router
- useAppDispatch
- RTK Query
- map
- Today
- Total
목록인프런, 유데미/한입 크기로 잘라 먹는 리액트 (33)
짧은코딩
-이전에 정리한 글 https://shortcoding.tistory.com/194?category=1007874 복잡한 상태 관리 로직 분리하기 App 컴포넌트에는 굉장히 많은 상태들이 존재한다. -상태 변화 처리 함수 onCreate: 데이터 생성 onEdit: 데이터 수정 onRemove: 데이터 삭제 이 3개의 상태 변화 로직이 있다. 함수들 안에 data가 많다. 이 shortcoding.tistory.com 이 글과 함께 보면 더 잘 이해가 될 것이다. 1. 상태 관리 세팅하기 -App.js const [data, dispatch] = useReducer(reducer, []); 복잡한 상태의 로직을 분리하기 위해서 useReducer를 사용한다. 2. 프로젝트 State Context 세팅하..
1. 폰트 세팅 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 이 사이트에 가면 여러 가지 폰트가 있다. 이 중에서 나눔펜, 연성 글꼴을 사용할 것이다. -App.css @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap"); .App { padding: 20px; font-family: "Nanum Pen Script", cursive; font-family: "Yeon Sung", cursive;..
PAGE ROUTING ROUTER: 데이터의 경로를 실시간으로 지정해주는 역할 ROUTING: 경로를 정해주는 행위와 과정을 다 포함하는 말, 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 과정 PAGE ROUTING: 요청에 따라서 어떤 페이지를 돌려줄지 정해주는 것 -MPA(Multipage Application) 이렇게 여러 개의 페이지를 준비했다가 요청이 들어오면 적절한 페이지를 돌려주는 것을 MPA라고 한다. -SAP(Single Page Application) 리액트는 MPA가 아닌 SPA를 사용한다. SPA는 페이지가 하나 밖에 없는 간단한 어플리케이션이다. SPA는 페이지를 이동할 때 위 부분이 전혀 깜빡이지가 않는다. 핸드폰에서 사용하는 것 처럼 이동이 빠르다. 우선 처음엔 ..
시험 기간 동안 리엑트 공부를 제대로 하지 못했다. 이제 시험이 끝나서 강의를 들으면서 공부했던 내용을 다시 복습하고 다시 알아야 할 점은 기록해 두려고 한다. -깃허브 https://github.com/5hyun/React_Study/tree/main/React_test App.js -소스 코드 import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, setData] = useState([]); //글을 저장한다. const dataI..
전달만하는 prop가 많이 생기면 이름 바꾸기도 어렵고 코드 작성, 수정에 악영향을 끼친다. 이런 상황을 props가 드릴처럼 땅을 파고 들어간다고 보고 Prop Drilling이라고 한다. => 부모에서 자식으로만 데이터를 전달하는 단방향 데이터 흐름이라서 이런 문제가 생긴다. 1. 모든 데이터를 Provider라는 공격자 역할을 하는 컴포넌트에게 전달 2. Provider는 특별해서 자신의 자손들에게 직통으로 데이터를 줄 수 있다. => Prop Diilling이 없어졌다. 3. 자식 컴포넌트들은 Provider에게 직통으로 데이터를 받는다. 따라서 Provider 아래에 존재하는 모든 컴포넌트를 문맥화에 존재한다. Context -예시 const ThemeContext = React.createCo..
App 컴포넌트에는 굉장히 많은 상태들이 존재한다. -상태 변화 처리 함수 onCreate: 데이터 생성 onEdit: 데이터 수정 onRemove: 데이터 삭제 이 3개의 상태 변화 로직이 있다. 함수들 안에 data가 많다. 이렇게 컴포넌트의 코드가 길어지고 무거워 지는 것은 좋지 않다. => 따라서 복잡하고 긴 상태 변화 로직을 컴포넌트 밖으로 분리해야한다. useReducer const [state, dispatch] = useReducer(reducer, initialState); 이렇게 있으면 왼쪽 첫번째 인자는 state이다. 그리고 두번째 인자는 상태를 변환시키는 엑션을 발생시키는 함수이다. 오른쪽 첫번째 인자에는 reducer가 있어야한다. dispatch에서 일어난 상태 변화를 redu..
이전까지 한 최적화를 해도 모든 최적화가 되진 않는다. 특히 심각한 것은 댓글을 삭제하면 다른 댓글도 리렌더링된다. -DiaryItem.js import React, { useEffect, useRef, useState } from "react"; const DiaryItem = ({ onEdit, onRemove, author, content, created_date, emotion, id, }) => { useEffect(() => { console.log(`${id}번 째 아이템 렌더!`); }); // isEdit가 false면 평소, true면 수정하는 상태 const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIs..
-DiaryEditor.js import React, { useEffect, useRef, useState } from "react"; const DiaryEditor = ({ onCreate }) => { useEffect(() => { console.log("DiaryEditor 렌더"); }); const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }..
App에서 state로 count, text가 있다. 그리고 자식 컴포넌트에 CountView는 count를 받고 TextView는 text를 받는다고 한다. 그럼 count가 변경되었을 때, 모두 자식도 모두 리렌더 된다. 하지만 TextView는 리렌더 될 필요가 없다. => 자식 컴포넌트에게 업데이트 조건으로 각각 count와 text가 변경될 때만 업데이트 되도록 조건을 걸면된다. 이것을 할 수 있는 것이 React.memo이다. -리엑트 공식 문서 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 이 사이트를 잘..
Memoization 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억했던 데이터를 반환 시키게 하는 방법 -Memoization이 리엑트의 어떤 부분에 적용되어야 하는지 App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { cons..