공부/React
-
[React] useTransiton 이란?공부/React 2024. 2. 29. 16:38
1. 정의 리액트 18 버전 이후 추가된 기능으로 공식문서에는 useTransiton를 UI를 차단하지 않고 state를 업데이트 할 수 있는 React Hook이라고 설명한다. 예를 들면 극단적으로 무거운 작업을 할 때 다음 입력을 받지 못할 정도의 프레임 저하가 발생하게되면 유저와 상호작용이 불가하고 좋은경험을 제공할 수 없게된다. 이런 문제를 해결하기 위해 작업 (state 변화)에 우선순위를 나누고, 우선순위가 높은 이벤트가 발생 시 그 이벤트를 우선처리하고 이후에 우선순위가 낮은 이벤트를 핸들링하여 앞서말한 문제를 해결하는 기능이다. 즉, state 변화에 우선순위를 부여하는 React Hook이다. (상태변화를 일으키는 함수의 우선순위를 낮추는 hook) useTransition은 [isPen..
-
[React] Automatic Batching 이란?공부/React 2024. 2. 27. 21:21
Automatic Batching이란 리액트 18 버전 이후 개선된 기능 중 하나이다. Batching : 소프트웨어의 성능을 향상 시키기 위해 리엑트에서 여러개의 state의 업데이트를 일괄적으로 처리하는(리 렌더링) 기능을 의미한다. 예를 들어 하나의 이벤트 안에 두 개의 state 업데이트를 가지는 경우, React에서는 항상 이런 작업을 하나의 렌더링으로 일괄 처리하였다. 다음 예제를 보면 state는 두 번 변경하지만 React는 한 번의 렌더링만 수행한 것을 확인할 수 있다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); //handleClick 함수 안에서 배..
-
[React] memo, useMemo 란?공부/React 2024. 2. 25. 16:37
1. React.memo memo는 함수 컴포넌트를 렌더링하는 동안 이전 렌더링 결과를 기억해, 동일한 props가 전달될 경우 이전 결과를 재사용하여 렌더링을 방지한다. 즉, 특정 컴포넌트로 전달되는 props가 변할때만 재렌더링을 하기 때문에 불필요한 재렌더링을 방지한다. useMemo = useEffect와 비슷한 용도이지만 import {memo, useState} from 'react' let Child = memo( function(){ console.log('재 렌더링 됐습니다.'); return 자식 컴포넌트 }) function Parents () { let [count, setCount] = useState(0) return ( { setCount(count+1) }}> 확인용 버튼 )..
-
[React] React.lazy 란?공부/React 2024. 2. 25. 15:52
1. 정의 lazy import : 컴포넌트를 별도로 분할하여 필요할 때 비동기적 로드를 할 수 있도록 해주는 React 함수 초기 로딩 시간을 줄이고 앱 성능을 향상시킬 수 있다는 장점이다. 2. 사용법 import > 분리한 컴포넌트 js파일을 lazy로 감싼다. import {lazy, Suspense , useState} from 'react' const SubPage = lazy( () => import('./testpage/SubPage.js') ) 이렇게 lazy 문법을 사용하면 SubPage 컴포넌트가 필요해진다면 import를 한다는 의미이다. 따라서 SubPage 컴포넌트를 별도의 js로 나누기 때문에 첫 페이지 로딩 속도를 향상 시킬 수 있다. //기타 내용 생략 (SubPage의 R..
-
[React] localStorage 브라우저 데이터 저장 2 (최근 본 상품(페이지) 기록하기)공부/React 2024. 2. 22. 01:12
과제 출처 : 코딩애플 1. 목표 메인페이지에 있는 상품의 상세페이지로 이동하는 경우 해당 상품의 id값을 localStorage에 저장한다. 중복된 값이 있는 경우 제거한다. 2. 코드 App.js 기존에 detail에 전달되는 shoes 데이터를 이용해서 detail.js에서 id값을 조회하여 localstorage에 데이터를 저장한다. Detail.js function Detail(props) { //url로 가져온 id값 let {id} = useParams(); //find 함수로 url로 가져온 id값과 일치하는 id값을 찾는다. let find_product = props.shoes.find(x => x.id == id); //Detail 페이지가 한번 로드 될때 한번 씩 실행 useEffe..
-
[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기공부/React 2024. 2. 22. 00:33
React는 원래 props를 이용해서 부모에서 > 자식으로만 데이터를 전달할 수 있다. 하지만 부모컴포넌트에서 데이터를 변경하는 함수를 props로 전달한다면 자식 > 부모로도 데이터를 전달(변경)이 가능하다. 자식➡️부모 데이터 전달하기 Parents.js import { use State } from "react"; import Child from "./Child.js"; function Parents (props) { let [name, setName] = useState("Chicken"); function ChangeName(name : string) { setName(name); } return ( {name} ) } export default Parents; Child.js function..
-
[React] localStorage 브라우저 데이터 저장공부/React 2024. 2. 20. 23:31
1. 개념 localStorage는 브라우저에 제공하는 데이터 저장 메커니즘이다. 클라이언트 측에서 작은 양의 데이터를 로컬 컴퓨터에 영구적으로 저장할 수 있게 해준다. 주로 사용자 설정, 임시 데이터 등을 저장하는데 활용한다. F12(개발자 도구) > Application 항목 > localStorage 에서 확인 가능하다. 2. 사용방법 localStorage.setItem(‘Key’,’Value’) : 저장할 key값과 data를 입력하면 저장된다. localStorage.getItem(‘Key’) : 출력할 key값을 입력하면 해당 데이터를 출력한다. localStorage.removeItem(‘Key’) : 삭제할 데이터의 key 값을 입력하면 데이터가 삭제된다. 따로 데이터를 수정하는 문법은 ..
-
[React] Redux 문제 1. object 데이터를 버튼 클릭 시 1씩 증가하기공부/React 2024. 2. 20. 01:55
let num = state.findIndex((a)=>{return a.id === action.payload}) state[num].count++; 데이터 출처 : 코딩애플 강의 store.js let user_cart = createSlice({ name : 'user_cart', initialState : [ {id : 1, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ], reducers : { changecount (state,i) { //i값을 가져와서 출력하니깐 { } 형식으로 나와서 꺼내서 사용함 let conunt_number = i.payload; //state함수로 count값을 수정 ..