728x90 반응형 SMALL 기술 개발/React16 React의 state와 props React는 상태(state)와 속성(props)이라는 두 가지 개념을 중심으로 구성된 JavaScript 라이브러리다. props 와 state 는 React 에서 데이터를 다룰 때 사용하는 개념이다. State(상태) React 컴포넌트에서 state는 컴포넌트 내부에서 관리되는 값으로서 변경 가능하다. 이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링된다. 즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고, 컴포넌트의 렌더링 결과를 결정한다. State 사용 방법 1. State 초기화하기 import React, { Component } from 'react'; class Counter extend.. 2023. 4. 5. 날짜 라이브러리 비교(Day.js, Moment.js, date-fns, Luxon) Date 라이브러리 대표 4가지를 비교해보았다. Day.js, Moment.js, date-fns, Luxon Stars Issues Version Updated Created Size date-fns 30,883 529 2.29.3 5 months ago 8 years ago 26.8 KB dayjs 42,151 675 1.11.7 2 months ago 5 years ago 2.9 KB luxon 13,539 127 3.2.1 a month ago 6 years ago 21.4 KB moment 47,214 255 2.29.4 7 months ago 11 years ago 72.1 KB 1. Day.js Day.js 특징 JavaScript 날짜 관련 라이브러리 중 가장 가벼운 라이브러리 moment.. 2023. 2. 10. Data Fetching Library: React-Query, SWR 2020년부터 React Query와 SWR과 같이 data fetching 라이브러리들의 인기가 높아져가고 있다. Stats - 2023.01.31 기준 Stars Issues Version Updated Created react-query 32,659 50 3.39.3 6 days ago 8 years ago swr 25,506 90 2.0.3 3 days ago 5 years ago 리액트에서 사용하는 상태(State) Local State: 리액트 컴포넌트 안에서만 사용되는 state Global State: Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 state Server State: 서버로부터 받아오는 state 리덕스로 상태 관리를 했기 때문에 Global Stat.. 2023. 1. 31. 컴포넌트 성능 최적화 컴포넌트는 4가지와 같은 상황에서 리렌더링이 발생한다. 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 컴포넌트의 개수가 많지 않다면 모든 컴포넌트를 리렌더링해도 느려지지 않지만, 약 2000개가 넘어가면 성능이 저하된다. 따라서, 컴포넌트 리렌더링 성능을 최적화해 주는 작업을 진행해야한다. 1. React.memo를 사용하여 컴포넌트 성능 최적화 - React.memo를 쓰기 전과 후 성능 비교 // TodoListItem.js import React from 'react'; import { MdCheckBoxOutlineBlank, MdCheckBox, MdRemoveCircleOutline } from 'rea.. 2023. 1. 10. React hooks (useRef) React hooks (useRef) const refContainer = useRef(initialValue); useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다. useRef는 언제 사용할까? 1. DOM 조작 useRef를 사용하여 DOM 요소를 참조하고 해당 요소를 직접 조작할 수 있다. 예를 들어, 입력 필드를 포커스하거나, 특정 요소의 스크롤 위치를 조정하거나, 또는 애니메이션을 제어하는 등의 작업을 수행할 수 있다. ex) 클릭 이벤트가 발생했을 때 특정 DOM 요소를 포커스 import { useRef } from 'react'; function Examp.. 2023. 1. 8. React hooks (useCallback) useCallback도 useMemo와 비슷한 함수다. https://suzzeong.tistory.com/100 React Hooks (useMemo) useMemo는 메모이제이션된 값을 반환한다. 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제 suzzeong.tistory.com useMemo와 비슷하게 렌더링 성능을 최적화해야하는 상황에서 사용한다. useCallback을 사용하면 함수를 재사용할 수 있다는 장점이 있다. 예를 들어서, 컴포넌트 함수에 함수가 선언이 되어 있으면 함수는 컴포넌트가 렌더링될 때마다 새로운 함수를 생성하게 된다. 하지만, useCallback을 사용하면, 컴포.. 2023. 1. 8. 이전 1 2 3 다음 728x90 반응형 LIST
