본문 바로가기

useMemo3

React.memo()에 대해 React.memo( ) 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해주는 함수 - 즉, useState, useReducer, useContext 와 같이 상태와 관련된 리렌더링과는 무관함! HOC (Higher Order Component) 이며, 렌더링 결과를 메모이징하여 불필요한 리렌더링을 건너 뛰어, UI 성능을 증가시킬 수 있다. React.memo(컴포넌트) 위처럼 컴포넌트를 감싸주면 된다. 컴포넌트가 React.memo() 로 래핑 될 때 리액트는 컴포넌트를 렌더링 하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props 가 동일하다면 리액트는 메모이징된 내용을 재사용해준다. (리렌더링X) props 동등 비교 React.m.. 2023. 4. 3.
KDT 5th 웹개발자 입문 수업 40일차 간단하게 백엔드 서버 구축해서 데이터를 프론트에 보내기 터미널 2개에 백엔드 서버와 리액트를 둘다 돌려준다. const express = require('express'); const cors = require('cors'); const server = express(); const PORT = 4000; server.use(cors()); server.get('/', (req, res) => { const pororoObjArr = [ { name: '뽀로로', age: '5', nickName: '사고뭉치', }, { name: '루피', age: '4', nickName: '공주님', }, { name: '크롱이', age: '5', nickName: '장난꾸러기', }, ]; res.send(JS.. 2023. 3. 31.
한입 크기로 잘라먹는 리액트 - 5 React 에서 API 호출하기 useEffect 를 사용하여 컴포넌트의 Mount 시점에 API 를 호출하고 해당 API 의 결과값을 일기 데이터의 초기값으로 이용 = fetch() 를 사용하여 API 를 호출 -> API 의 응답 데이터를 App.js 의 data 상태에 저장하여 초기화해주기 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonpla.. 2023. 3. 31.

티스토리툴바