useCallback

useCallback 1. useCallback - React의 Hook - 함수 컴포넌트 내에서 함수를 Memoization하고 재사용하기 위해 사용되는 도구 - 불필요한 함수 재생성을 방지하고 성능을 최적화할 수 있음 - 일반적으로 React 컴포넌트 내에서 함수 정의 시, 컴포넌트 리렌더링될 때마다 새로운 함수 인스턴스가 생성 → 이는 성능 저하를 초래하여, 이 문제를 해결하기 위해 useCallback을 사용 → 함수를 캐싱하고 이전에 생성된 함수 인스턴스를 재사용함 2. 예시 - App.js import React, { useState, useCallback } from "react"; import "./App.css"; let SubCallCount = 0; function Sub({ no1,..

• format_list_bulleted Front-End Study/React
• · 2023. 8. 11.
• textsms

React.memo

React.memo 1. React.memo - React에서 사용되는 성능 최적화를 위한 기능 - 컴포넌트가 이전에 렌더링한 결과를 기억하고, 동일한 속성(props)로 다시 렌더링될 때, 이전 결과를 재사용할 수 있음 - 부모 컴포넌트가 업데이트되더라도, 컴포넌트의 속성이 변경되지 않았다면, React.memo를 사용해 불필요한 렌더링을 방지하고 성능을 향상시킴 2. 사용방법 import React from 'react'; const MyComponent = React.memo(props => { // 컴포넌트 렌더링 로직 }); export default MyComponent;

• format_list_bulleted Front-End Study/React
• · 2023. 8. 11.
• textsms

useMemo

useMemo 1. useMemo - React의 훅 중 하나로, 성능 최적화를 위해 사용 - 계산 비용이 높은 함수 결과를 이전 계산 결과와 비교해, 이전 결과와 동일하다면 이를 재사용하여, 렌더링 성능 향상 2. useMemo 구문 - dependency 들은 이 함수가 의존하는 값들을 나타냄. → 의존성 값들이 변경되었을 때만 다시 실행되고, 그렇지 않으면 계산한 결과를 재사용 const memoizedValue = useMemo(() => { // 계산 비용이 높은 작업 수행 return result; }, [dependency1, dependency2, ...]); 3, 예시 - App.js import React, { useState, useMemo } from "react"; import "..

• format_list_bulleted Front-End Study/React
• · 2023. 8. 11.
• textsms

filter 함수

filter 함수 1. filter( ) 함수 - 배열(Array) 객체의 메서드 - 배열 내의 요소들을 특정 조건에 따라 걸러내어, 새로운 배열을 생성하는 데 사용 2. 예시 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const evenNumbers = numbers.filter(function(number) { return number % 2 === 0; }); console.log(evenNumbers);

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 8. 9.
• textsms

useRef

useRef 1. useRef - React 라이브러리에서 제공하는 훅(Hook) - 함수형 컴포넌트 내에서 DOM 요소 or 값을 참조할 때, 사용되는 도구 - 이를 통해, 컴포넌트의 렌더링 사이클과는 독립적으로 값을 저장 및 유지 가능 → useState와 달리, 리렌더링을 하지 않고 값을 저장 및 유지함 2. 예시 - RefEx.js import React, { useState, useRef } from "react"; function RefEx() { const formInputNoRef = useRef(null); const [no, setNo] = useState(""); const notice = () => { formInputNoRef.current.focus(); if (!no) { al..

• format_list_bulleted Front-End Study/React
• · 2023. 8. 8.
• textsms

focus 함수

focus 함수 1. focus( ) 함수 - HTML 요소에 포커스를 설정하는 메서드 - 사용자가 키보드 or 마우스 등을 사용하여, 상호작용할 때, 해당 요소에 집중되는 것을 의미

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 8. 8.
• textsms