728x90 반응형 웹/24-StudyWithPnP17 [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. [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. [React.js] 5주차 - Counter 만들기, useEffect 1. Counter 만들어보기 Viewer 컴포넌트는 count 값을 보여주고 있고, Controller 컴포넌트는 count 값을 증가시킬 수 있는 버튼을 가지고 있다. 두 컴포넌트는 state 변수인 count 를 공유하고 있는데, Viewer 와 Controller 컴포넌트는 병렬적인 관계이기 때문에 props 공유가 불가능하다. 그래서 두 컴포넌트의 부모 컴포넌트인 App 컴포넌트에 state 변수를 두고 자식 컴포넌트인 Viewer, Controller 컴포넌트에 count 변수를 공유해준다. 이렇게 공유되는 state 를 계층 구조의 맨 위로 끌어올려 아래 컴포넌트들이 모두 공유할 수 있도록 만드는 것을 State Lifting 이라고 한다. 리액트에서 데이터는 위에서 아래로 단방향으로 흐르기.. 2024. 11. 4. 이전 1 2 3 4 5 다음 728x90 반응형
