FrontEnd/React

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.Context APIReact에서 전역적으로 데이터를 관리하고 전달할 수 있는 기능입니다. 이를 통해 중간 컴포넌트를 거치지 않고도 트리 구조의 하위 컴포넌트에 데이터를 쉽게 전달할 수 있습니다.주로 테마나 사용자 정보, 언어 설정과 같은 데이터를 여러 컴포넌트에 전달할 때 유용합니다.   2.Context API 생성과정 2-1.Context 생성React.createContext로 새로운 Context를 생성합니다.import React from 'react';// ThemeContext라는 Context를 생성합니다.const ThemeContext = React.createContext('light'..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.커스텀 훅커스텀 훅(Custom Hooks)은 React의 훅 시스템을 활용하여 재사용 가능한 로직을 작성하는것입니다.커스텀 훅은 use로 시작하는 함수로, 일반적으로 여러 훅을 조합하여 특정 기능을 캡슐화합니다.컴포넌트에서 다른 훅처럼 사용할 수 있으며, 로직을 재사용할 수 있습니다.    2.예시 (화면 너비를 추적하는 커스텀 훅)import { useState, useEffect } from 'react';import React from 'react';// 화면 너비를 추적하는 커스텀 훅function useWindowWidth() { const [windowWidth, setWindowWidth] ..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.useReducer React의 Hook 중 하나로, 상태 관리의 복잡성을 다루기 위해 사용됩니다. useState보다 복잡한 상태 로직을 관리해야 할 때 유용합니다const [state, dispatch] = useReducer(reducer, initialState);state: 현재 상태를 나타냅니다.dispatch: 상태를 변경하기 위해 호출하는 함수입니다.reducer: 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.initialState: 상태의 초기값입니다.1-1.리듀서 함수 (reducer)상태를 어떻게 업데이트할지 결정하는 함수입니다.매개변수state: 현재 상태를 나타냅니다.act..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.React.memo고차 컴포넌트로, 함수형 컴포넌트의 결과를 메모이제이션하여 props가 변경되지 않으면 해당 컴포넌트를 다시 렌더링하지 않습니다. 이를 통해 성능을 최적화할 수 있습니다. useCallback하고 사용하면 좋습니다.    아래에서 useCallback으로 ChildComponent 의 props인 handleClick 함수가 한 번만 생성되도록 하여ChildComponent에 전달되는 onClick prop의 참조가 변경되지 않습니다.그러면 React.memo는 onClick prop의 참조가 변경되지 않았으므로, 자식 컴포넌트가 다시 렌더링되지 않습니다.import React, { use..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.useCallback리액트 훅 중 하나로, 메모이제이션된 콜백 함수를 반환합니다. 주로 함수가 불필요하게 재생성되는 것을 방지하여 성능을 최적화할 때 사용됩니다.자식 컴포넌트에 props로 전달할 때 불필요하게 다시 렌더링되는 것을 방지하기 위해 자주 사용됩니다.  useCallback을 사용하여 이 함수가 한 번만 생성되도록 합니다. 의존성 배열이 빈 배열이므로 컴포넌트가 마운트될 때 한 번만 생성됩니다.import React, { useState, useCallback } from 'react';function ChildComponent({ onClick }) { console.log('ChildCom..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.useMemo 리액트의 훅 중 하나로, 성능 최적화를 위해 메모이제이션을 수행합니다. 메모이제이션은 계산된 값을 기억해두어, 같은 입력 값에 대해 같은 결과를 반복적으로 계산하지 않도록 합니다. 이 훅은 주로 렌더링 성능을 최적화할 때 사용됩니다.     2.예시useMemo의 두 번째 인자로 의존성 배열 을 포함시켜 배열에 포함된 값이 변경될 때만 메모이제이션된 값을 다시 계산합니다. 배열이 빈 경우, 메모이제이션된 값은 컴포넌트가 마운트될 때 한 번만 계산됩니다.아래 코드의 경우 number 값이 변할때만 메모이제이션된 값을 다시 계산합니다.여기에서 setOtherState(!otherState)}을 통..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.사이드 이펙트(Side Effect)함수형 프로그래밍에서 사용되는 개념으로, 함수의 실행이 외부 상태를 변경하거나 외부 상태에 의존하는 경우를 의미합니다.사이드 이펙트는 함수나 컴포넌트가 실행되는 동안 내부 상태가 아닌 외부 상태에 영향을 미치거나, 외부 상태에 의해 영향을 받는 작업입니다.   2.useEffectuseEffect는 리액트 함수형 컴포넌트에서 사이드 이펙트(side effects)를 관리하기 위한 훅입니다. 사이드 이펙트는 데이터 가져오기, 구독 설정, DOM 조작, 타이머 설정 등 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업을 포함합니다.useEffect(() => { // 이곳에..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.가상 DOM현대적인 UI 라이브러리에서 효율적으로 DOM을 관리하기 위해 사용되는 개념입니다. 가상 DOM은 실제 DOM과 비슷한 구조를 가지는 메모리 상의 가벼운 객체입니다.  2.가상 DOM 개념2-1.가상 DOM 생성가상 DOM은 실제 DOM의 복사본이 아니라 메모리 내에서 만들어지는 가벼운 객체입니다. 이 객체는 실제 DOM과 동일한 구조를 가지며, UI를 효율적으로 업데이트하기 위해 사용됩니다.   2-2.렌더링컴포넌트의 상태나 속성이 변경될 때 가상 DOM을 사용하여 UI를 업데이트합니다.이 과정에서 실제 DOM과의 차이를 비교하여 변경된 부분만 실제 DOM에 적용합니다.   2-3.성능 최적화가..