개발 메모장 개발 메모장

Hook

• 고급 React Hooks 사용을 위한 팁과 요령

  React 2024. 2. 5. 13:36

  React Hooks는 단순히 상태와 생명주기 메서드를 함수형 컴포넌트로 가져오는 것 이상의 강력한 기능을 제공합니다. 여기서는 지난 편에 이어 useCallback, useMemo, useReducer를 더 효과적으로 사용하기 위한 실용적인 예제와 덜 알려진 방법들을 공유하고자 합니다. 1. useCallback과 useMemo, useReducer를 지혜롭게 사용하기 1.1 useCallback 예제: 이벤트 핸들러 최적화 import React, { useState, useCallback } from 'react'; function TodoList({ todos, toggleTodo }) { // useCallback을 사용하여 불필요한 렌더링 방지 const toggle = useCallback(..

  Read More
• useState와 useEffect를 넘어선 고급 React Hooks

  React 2024. 1. 29. 14:11

  React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다. useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다. 1. useCallback useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다. 특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다. 큰 리스트나 테이블의 성능 최적화. 자식 컴포넌트의 불필요한 렌더링 방지. const memoizedCallback = useCallback( () => { /..

  Read More
• Git 기초 마스터하기 - 3편 Alias와 Hook으로 워크플로우 최적화하기

  Git 2024. 1. 8. 15:34

  이번 편에서는 Alias와 Hook을 사용하여 Git 워크플로우를 최적화하는 방법을 알아봅시다. 위 기능들은 반복적인 작업을 자동화하고 시간을 절약해 주어, 개발 프로세스를 더 효율적이고 간소화된 방식으로 만들어 줍니다. 1. Git Aliases Git에서 Alias는 자주 사용하는 명령어에 대한 사용자 정의 단축키를 만들 수 있게 해 줍니다. 생성하는 방법은 Git 설정 파일에서 간단히 설정할 수 있습니다. git config --global alias.co checkout git config --global alias.br branch git config --global alias.ci commit 이제 git checkout대신 간단하게 git co를 사용할 수 있습니다. 2. Automating..

  Read More