728x90 반응형 자바스크립트29 [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] 4주차 - state, useState, useRef, React Hooks, 렌더링 1. State State 는 현재 가지고 있는 형태나 모양을 정의하고, 변화할 수 있는 동적이 값을 말한다. 리액트에서 모든 컴포넌트들은 State 를 가질 수 있는데(한 개의 컴포넌트는 여러개의 State 를 가질 수 있음), State 를 갖는 컴포넌트들은 이 State 값에 따라 렌더링 되는 UI 가 결정된다. 이 때 컴포넌트의 State 값에 따라서 화면이 다시 렌더링 되는 것을 리 렌더(Re-Render) 또는 리 렌더링(Re-Rendering) 이라고 한다. 1.1. useState 사용하기 useState 를 사용하려면 리액트의 내장 함수인 useState 를 import 해줘야 한다. import { useState } from 'react'; useState 함수를 호출하고 반.. 2024. 10. 29. 이전 1 2 3 4 ··· 8 다음 728x90 반응형
