목록React (29)
개발 블로그
React.memo컴포넌트를 인수로 받아, 최적화된 컴포넌트로 만들어 반환 const MemoizedComponent = memo(Component)반환값 : 최적화된 컴포넌트 인수 : 컴포넌트 * Props를 기준으로 메모이제이션 됨 Parent(부모) 가 리렌더링 되도자신이 받는 Props가 바뀌지 않으면 리렌더링 되지 않는다 이 설정을 하고 실습을 하고 개발자 도구를 끄지 않고 만져보면 어느 컴포넌트에서 리렌더링이 되는 지 알 수 있다토글에 체크를 하는건데도 모든 컴포넌트가 리렌더링이 되는 것을 확인할 수 있다 특히 Header 컴포넌트는 리렌더링이 될 필요가 없기 때문에 import "./Header.css";import { memo } from "react";..
최적화(Optimization)웹 서비스의 성능을 개선하는 모든 행위를 일컫음아주 단순한 것부터 아주 어려운 방법까지 매우 다양함 일반적인 웹 서비스 최적화 방법서버의 응답속도 개선이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선불필요한 네트워크 요청 줄임 React App 내부의 최적화 방법컴포넌트 내부의 불 필요한 연산 방지컴포넌트 내부의 불 필요한 함수 재생성 방지컴포넌트의 불 필요한 리렌더링 방지 useMemo와 연산 최적화"메모이제이션" 기법을 기반으로 불 필요한 연산을 최적화 하는 리액트 훅자매품 : useCallback 반복적으로 수행되는 동일한 연산 import "./List.css";import TodoItem from "./TodoItem";import { useState } fro..
useReducer 컴포넌트 내부에 새로운 State를 생성하는 React Hook모든 useState는 useReducer로 대체 가능 상태 관리 코드를 컴포넌트 외부로 분리할 수 있음 컴포넌트 폴더 밑에 Exam 파일 생성 해줌 import 해주고 그럼 Exam.jsx만 렌더링 되는데 이걸 간단한 버튼 프로그램으로 만들어보기 import { useReducer } from "react";// reducer : 변환기// -> 상태를 실제로 변화시키는 변환기 역할function reducer(state, action) { /* if (action.type === "INCREASE") { return state + action.data; } if (action.type === "DEC..
크롬 웹스토어에 아래의 확장 프로그램 설치 스위치 켜기 보면 확장아이콘이 주황색으로 바뀐 것을 볼 수 있다 개발자 도구로 보면 확장 프로그램 설치로 인해 두개의 탭이 추가 됨 props 와 hooks 조회 가능
회사 컴퓨터로 근무시간 끝나고 리액트 강의 듣는데 연휴가 넘 길어서 노트북으로 세팅함 일단 나는 vscode는 노트북에 미리 설치되어있는 상태임 # Korean Language Pack for Visual Studio Code # Prettier - code formatter 설치 후 Ctrl+ , 키 눌러서 설정 들어간 다음에 Editor: Format On Save 체크박스에 체크하기 Editor: Default Formatter 에 Prettier 지정하기 # Material Icon Theme - 파일 아이콘 직관적으로 보기위해서 설치, 파일 아이콘 테마 설정하기 # Error Lens - 설치 # Live Server - html 페이지를 만들고 ctrl + shift + p 누르고 open w..
마운트 : 탄생1. 빈 배열 []을 넣은 경우useEffect(() => { console.log("update");}, []); 처음 마운트될 때만 딱 한 번 실행됩니다.이후 state/props가 바뀌어도 실행되지 않아요.흔히 초기화 작업(API 호출, 이벤트 리스너 등록 등)에 사용합니다. 업데이트 : 변화 리렌더링2. 의존성 배열이 없는 경우useEffect(() => { console.log("update");});렌더링될 때마다 실행됩니다.즉, 컴포넌트가 처음 마운트될 때 + 상태(state)나 props가 바뀔 때마다 실행돼요."모든 업데이트마다 실행"되는 효과라고 보면 됩니다.useEffect(() => {...}, []);처음 마운트될 때 한 번만useEffect(() => {...}..
useEffect 리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook어떤 값이 변경될 때마다 특정 코드를 실행 - 하나의 값 검사하기 import { useEffect, useState } from "react"; ① 함수 useEffect를 사용하기 위해 react 라이브러리에서 불러온다. ② useEffect를 호출하고 두 개의 인수를 전달. 첫 번째 인수로 콜백 함수를, 두 번째 인수로 배열을 전달 useEffect의 용법 useEffect(callback, [deps]) 콜백 함수 의존성 배열 두 번째 인수로 전달한 배열을 의존성 배열(Dependency Array, 줄여서 deps)이라고 하는데,useEffect는 이 배열 요소의 값이 변경되면 첫 번째 인..