728x90 반응형 리액트26 [React.js] 8주차 - MPA, SPA, 이미지 최적화 1. 페이지 라우팅경로에 따라 알맞은 페이지를 렌더링 하는 과정을 말한다. 1.1. MPA 전통적인 웹 서버는 사용자에게 보여줄 웹 페이지들을 다 가지고 있었다. 브라우저가 특정 주소를 갖는 페이지를 요청하면 해당 페이지를 찾아 xxx.html 페이지를 브라우저로 보내주고, 브라우저는 받은 html 파일을 그대로 화면에 렌더링하는 방식으로 페이지를 라우팅하였다. 이렇게 서버가 여러 개의 페이지를 가지고 있는 것을 Multi Page Application(MPA), 브라우저가 페이지를 요청했을 때 서버 측에서 미리 완성해놓은 html 파일을 보내서 브라우저가 그대로 렌더링하는 것을 서버 사이드 렌더링(Server Side Rendering) 방식이라고 한다. (서버 측에서 페이지를 미리 렌더링해준다는 의.. 2024. 12. 2. [React.js] 7주차 - 성능 최적화: useMemo, useCallback, useContext, React.memo 1. useReducer 컴포넌트 내부에 새로운 State 를 생성하는 리액트 훅으로 모든 useState 는 useReducer 로 대체 가능하다. 그렇다면 useReducer 와 useState 가 다른 점이 무엇일까? -> useState 를 사용하면 컴포넌트 내부에 상태관리 코드를 작성해야 하지만, useReducer 를 사용하면 컴포넌트 내부에 State 생성만 해놓고 실제 State 를 관리하는 코드는 컴포넌트 외부에 작성할 수 있다. 1.1. useReducer 사용하기 useReducer 훅의 첫 번째 인자로 상태를 실제로 변화시켜주는 reducer 함수가 들어가고, 두번째 인자로는 현재의 상태(State) 값이 들어간다.const [state, dispatch] = useReducer.. 2024. 11. 26. [TIL] 11/18 map 에서 key 가 필요한 이유, 1. map 에서 key 가 필요한 이유map 으로 컴포넌트를 반복해서 렌더링할 경우, 각 컴포넌트에는 key 값을 넣어줘야 한다. 넣어주지 않아도 에러가 나지는 않지만, 개발자 도구를 열어보면 콘솔창에 " Warning: Each child in a list should have a unique "key" prop " 라는 경고 문구를 확인할 수 있다. 그렇다면 key 는 왜 필요한 걸까? 결론부터 말하면 성능 최적화를 위해 필요하다. 리액트는 가상 DOM 을 사용하여 실제 DOM 과 비교하는 방식으로 렌더링 성능을 최적화한다. 리액트는 DOM 을 효율적으로 업데이트하기 위해 실제 DOM 과 비교할 수 있는 가상의 DOM 트리를 만들어 두고, 실제 DOM 과 비교해서 변경된 부분만 실제 DOM .. 2024. 11. 18. [React.js] 6주차 - TodoList 만들기 Todo 앱 만들기 1. App 컴포넌트최상위 컴포넌트인 App 에 todos state 를 정의해놓고 사용각 todo 에는 id 가 존재하는데, id 는 ref 로 정의 -> ref 는 state 와 다르게 값이 변경되어도 렌더링 ximport './App.css'import Header from './components/Header'import Editor from './components/Editor'import List from './components/List'import { useState, useRef } from 'react'const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Dat.. 2024. 11. 18. 이전 1 2 3 4 ··· 7 다음 728x90 반응형
