반응형 React-study33 [모던리액트 Deep Dive] 5장 리액트와 상태 관리 라이브러리 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장 양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함Action -> Dispatcher -> Model -> View 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미한다. 액션 타입과 데이터를 각 정의해 dispatcher로 전달한다.디스패처(dispatcher) : 콜백 함수 형태로 액션이 정의한 타입과 데이터를 모두 store로 보내는 역할을 한다.스토어(store) : 실제 상태의 값과 상태를 변경할 수 있는 메서드를 가지고 있다.뷰(view) : 리.. 2024. 11. 14. [모던 리액트 Deep Dive] 3장 리액트 훅 깊게 살펴보기 3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import { useState } from "react";const [state, setState] = useState(initialState); initialState에는 state의 초깃값을 넘겨준다. 아무런 값이 없으면 undefined다.useState 훅의 반환 값은 배열이며, 배열의 첫번째 원소로 state 값 자체를 사용할 수 있고, 두번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있다.useState의 클로저는 useState 내부에 선언된 함수(setState)가 함수의 실행이 종료된 이후에도(useState가 호출된 .. 2024. 11. 10. [모던 리액트 Deep Dive] 2장 리액트 핵심 요소 깊게 살펴보기 2.1 JSX란2.1.1 JSX의 정의JSX는 자바스크립트 표준이 아닌 페이스북 팀에서 만든 새로운 규칙이며, 반드시 자바스크립트 코드로 변환되어야 한다.JSX의 목표는 JSX 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성해 두고, 이 JSX를 트랜스파일이라는 과정을 거쳐 자바스크립트가 이해할 수 있는 코드로 변경하는 것이다. JSX는 JSXElement, JSXAttributes, JSXChildren, JSXString 네 가지로 구성되어 있으며, 개발자는 이는 확장성이 용이하게 디자인된 문법으로 이해할 필요가 있다 .JSXOpeningElementJSXClosingElementJSXSelfClosingElementJSXFragmentchildren 사용자가 컴포넌트를 만들어 사용할 때에는 반.. 2024. 11. 6. [모던리액트 Deep Dive] 1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 리액트와 자바스크립트리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 웹 애플리케이션을 더 쉽고 빠르게 개발할 수 있도록 도와준다. 리액트는 UI를 컴포넌트라는 독립적인 단위로 구성하여 코드의 재사용성과 관리 편의성을 높인다.자바스크립트는 웹 브라우저에서 실행되는 프로그래밍 언어이다. 우리가 웹 페이지에서 상호작용하는 기능들을 구현할 수 있게 해준다. 예를 들어, 버튼을 클릭했을 때 뭔가가 일어나게 하는 것이 자바스크립트를 통해 가능한 것이다.1.1 자바스크립트의 동등 비교와 데이터 타입자바스크립트에서 동등 비교는 리액트의 가상 DOM과 실제 DOM 비교, 렌더링판단, 메모이제이션등 여러 작업의 기초이므로 중요하다.모든 값은 데이터 타입을 가지며, 원시 타입과 객체 타입으로 나뉘고, .. 2024. 11. 5. [발표] useTransition과 useDeferredValue useTransition란복잡하거나 오래 걸리는 작업을 하는 동안 웹사이트가 부드럽게 작동할 수 있도록 돕는 도구로비동기 작업을 효율적으로 관리한다. useTransition 사용 방법1. 기본 사용법isPending : 현재 어떤 작업이 진행 중인지를 나타내는 값. 작업이 진행중이면 'true', 아니면 'false;.startTransition : 비동기 작업을 시작하는 함수. 이 함수 안에서 오래 걸리는 작업을 수행하면 된다.import React, { useState, useTransition } from 'react';function ExampleComponent() { const [isPending, startTransition] = useTransition(); const [data, .. 2024. 6. 25. [DIL] useDeferredValue useDeferredValue는 UI 일부의 업데이트를 지연시킬 수 있는 리액트 훅이다.const deferredValue = useDeferredValue(value) 참조 useDeferredValue(value)컴포넌트의 최상위 레벨에서 useDeferredValue를 호출하여 지연된 버전의 값을 가져온다.import { useState, useDeferredValue } from 'react';function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ...} 매개변수 value: 지연시키려는 값이다. 어떤 타입이든 가능하다. 반환값 초기 렌더링 중.. 2024. 6. 24. [DIL] useTransition const [isPending, startTransition] = useTransition() useTransition은 UI 를 차단하지 않고 state를 업데이트할 수 있는 React 훅이다. 참조 컴포넌트의 최상위 레벨에서 useTransition을 호출하여 일부 state 업데이트를 트랜지션으로 표시한다.import { useTransition } from 'react';function TabContainer() { const [isPending, startTransition] = useTransition(); // ...} 매개변수 useTransition은 매개변수를 받지 않는다.반환값useTransition은 정확히 두 개의 항목이 있는 배열을 반환한다.보류 중인 트랜지션이 있는지 여부를.. 2024. 6. 24. [발표] useMemo와 useCallback useMemo란?컴퓨터나 스마트폰에서 프로그램이 작업을 더 빠르고 효율적으로 할 수 있게 돕는 도구이다.반복해서 계산해야 하는 값이 있다면 미리 저장해두었다가 다음에 바로 꺼내어 쓸 수 있다. useMemo의 사용법const cachedValue = useMemo(calculateValue, dependencies)calculateValue : 캐시 저장할 함수 dependencies : calculateValue 코드 내에 있는 모든 반응형 값(props, state, 모든 변수와 함수 포함 가능)메모이제이션( memoization ): 'useMemo'는 함수의 반환값을 기억하고, 의존성 배월의 값이 변경될 때만 함수가 다시 실행된다. 그렇지 않으면 이전에 계산된 값을 반환한다. * 메모이제이션.. 2024. 6. 18. [DIL] useCallback useCallback(fn, dependencies)최상위 컴포넌트에서 useCallback을 호출하여 리렌더링 사이에 함수 정의를 캐시한다.import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); 매개변수 fn: 캐시하려는 함수 값이다. 어떤 인자도 받을 수 있고 어떤 값이라도 .. 2024. 6. 18. [DIL] useMemo useMemo(calculateValue, dependencies) useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 리액트 훅이다.컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시한다.*캐시 : 자주 사용하는 데이터를 임시로 저장해 두었다가, 필요할 때 바로 꺼내 쓰는 저장소.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수calculateValue : 캐시하려는 값을 계산하는 함수이다. 이 함수는 순수함수여야 하며, .. 2024. 6. 17. [DIL] useLayoutEffect * useLayoutEffect는 성능을 저하시킬 수 있다. 가급적이면 useEffect를 사용하는 것이 좋다. useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect이다.useLayoutEffect(setup, dependencies?) useLayoutEffect(setup, dependencies?)브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정한다.import { useState, useRef, useLayoutEffect } from 'react';function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = .. 2024. 6. 11. [발표] useEffect와 useLayoutEffect useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 리액트의 훅으로 구조는 다음과 같다.useEffect(setup, dependencies?) setup : 흔히 화살표함수로 할당하는 셋업함수이다. dependencies : 흔히 [] 로 useEffect 훅이 다시 실행될지 여부를 결정한다. 1. 기본사용 : 아래 예제에서 useEffect는 count가 변경될 때마다 실행된다. 의존성 배열 안에 count 확인.import React, { useState, useEffect } from 'react';function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log('coun.. 2024. 6. 4. 이전 1 2 3 다음 반응형
