Study46 10.2 Reducer 사용하여 부작용 처리 & Context API 사용하기 : useReducer와 useEffect 함께 사용시 최적화 방법 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 구조분해할당으로 최적화하기 #1. useReducer와 useEffect를 함께 사용한 후 최적화를 하였다. 어떻게 최적화 하였는지 #2 로 넘어가보자. import React, { useState, useEffect, useReducer } from "react"; import Card from "../UI/Card.. 2022. 5. 31. 10.1 Reducer 사용하여 부작용 처리 & Context API 사용하기 : useReducer (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. useReducer useState의 대체 함수이며 useState의 상위 버전의 Hook이다. 리액트 공식 홈페이지에서는 useReducer가 쓰이는 상황을 아래와 같이 설명한다. 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우 state가 이전 state에 의존적인 경우에 보통 useState보다 useR.. 2022. 5. 31. 10. Reducer 사용하여 부작용 처리 & Context API 사용하기 : useEffect (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. useEffect useEffect는 side effect를 수행할 때 사용하는 리액트 훅이다. 리액트에서 side effect란 쉽게 설명하면 리액트에서 UI를 렌더링 하는 것이 아닌 다른 모든 것이라고 생각하면 된다. 예를 들어보면 백엔드 서버에 http 리퀘스트를 보내는 것 브라우저 저장소에 무언가를 저장하는 것.. 2022. 5. 31. 9. 프래그먼트 작업, portar & Ref (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 프래그먼트 작업 리액트는 요소여러개가 부모 요소에 감싸져 있어야만 return이 가능하다. 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 만약 그렇지 않다면 에러가 발생할 것이다. 그래서 보통 div 태그로 모든 요소들을 감싸주는데, div태그 대신 프래그먼트로 div를 대체할 수.. 2022. 5. 30. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음