Frontend88 [React] React에서 HOC(High Order Components)란? 1. HOC(High Order Components) 란? Higher Order Component (HOC)는 React에서 사용되는 디자인 패턴 중 하나로, 컴포넌트 간의 로직을 재사용하고 추상화하기 위한 방법이다. HOC는 함수로 구현되며, 기존의 컴포넌트를 props로 받아서 감싼 후 새로운 컴포넌트를 리턴한다. HOC를 잘 사용하면 컴포넌트 간에 공통된 로직을 추상화하여 코드의 재사용성을 높이고 모듈성을 향상 시킬 수 있다. 나는 작년에 진행했던 프로젝트에서 HOC를 인증토큰이 필요한 페이지 즉 권한이 없이는 접근할 수 없는 페이지를 감싸는 데에 사용했다. (예: 마이페이지, 구매내역 등) 아래는 예시로 작성한 component 코드이다. import React, { useState } from.. 2024. 2. 1. [React] React에서 Custom Hooks란? 1. Custom Hooks이란? React에서 useEffect, useRef 등의 hook이 있듯이 React 개발자 스스로 Custom Hook을 만들어서 사용할 수 있다. Custom Hook은 기능을 재사용하기 위해 사용되는 함수입니다. Custom Hook은 보통 useState, useEffect 및 다른 React hook을 사용하여 상태 또는 행위를 추상화하고, 이를 컴포넌트 간에 공유할 수 있도록 도와준다. Custom Hook은 "use"라는 접두어로 시작해야 한다. 이는 hook으로 인식될 수 있게, 더 나은 코드 가독성을 제공하는데 도움이 된다. 2. Custom Hooks를 사용하는 이유 개발을 하다보면 비슷하게 생긴 코드를 파일마다 똑같이 작성하는 경우들이 생긴다. 그렇게 중복.. 2024. 1. 31. [React] 함수형 컴포넌트의 생명주기 1. 함수형 컴포넌트의 생명주기 구현 리액트에서 컴포넌트의 생명주기란? 컴포넌트가 생성되고 제거되는 과정동안 일어나는 여러 단계를 말한다. 함수형 컴포넌트에서 생명주기와 관련된 작업을 처리하기 위해서는 원래는 별도로 구현했었어야 했지만, React 16.8 버전 이후로부터 Hook이 도입되고 나서 React Hook인 useEffect를 통해 손쉽게 구현하는 것이 가능해졌다. 리액트 공식문서에서 useEffect는 클래스형 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 결합한 기능이라고 소개하고 있다. useEffect를 통해 Mounting, Updating, Unmounting 처리를 할 수 있는 것이다. 2... 2024. 1. 30. [React] useEffect와 useLayoutEffect 1. useEffect와 useLayoutEffect는 각각 무엇일까? useEffect와 useLayoutEffect 모두 React의 hook인데, 이 둘 모두 비동기 작업 또는 side effect를 처리하기 위해 사용되는 hook이다. 그렇기 때문에 비슷해보이지만 각각의 특징과 차이점이 있다. 2. useEffect와 useLayoutEffect의 차이점 useEffect의 경우 useEffect는 렌더링 후에 실행되는 함수이다. DOM의 Layout 렌더와 Paint가 종료된 후 호출되는 이펙트 함수이다. 렌더 -> 페인트 -> useEffect 순으로 실행되며, DOM이 그려진 후 useEffect의 callback 함수들이 실행되며 리렌더링이 실행된다. 이 1) 비동기 처리에 적절 useEf.. 2024. 1. 29. [React] React로 개발할 때 코드를 최적화하는 방법 React로 개발하며 코드를 작성할 때 어떻게 하면 코드를 최적화하며 작성할 수 있을까? 우선 코드최적화는 왜 하는 것일까? 코드최적화를 했을 때, 앱의 기능을 효율적으로 처리하여 성능을 향상시킬 수 있고, 사용자가 앱을 사용하며 느끼는 경험의 품질을 올려줄 수 있다. 그렇기 때문에 우리는 여러가지 자원 낭비를 주의하며 코드를 작성해야한다. React에서 코드 최적화 하기 위한 방법은 크게 두가지가 있다 1. 렌더링 최적화 하기 렌더링은 React 앱 성능에 가장 큰 영향을 미치기 때문에 렌더링 최적화는 필수이다. 1) 불필요한 렌더링 방지하기 효율적인 props 구조를 설계를 하여 불필요한 리렌더링을 방지한다. 메모이제이션을 사용해서 state나 props가 변경되지 않을 경우에는 리렌더링 하지 않게 .. 2024. 1. 25. [React] React에서 Refs란? 1. Ref란? Ref는 DOM노드나 Element에 접근하길 원할 때 사용한다. 클래스형 컴포넌트에선 createRef()로 사용하고, 함수형 컴포넌트에서는 useRef라는 hook을 import해서 사용한다. 개발하다보면 권장하지는 않지만 직접 DOM을 건드려야할 경우들이 생기는데 그럴 때 사용하는 것이다. 나의 경우에는 주로 Input 요소 또는 Scroll 제어 등을 할 때 Ref를 사용했던 것 같다. React 공식문서에서는 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하라고 권고하고 있다. 2. 함수형 컴포넌트에서 Ref를 사용한 예시 import React, { useRef, useState, useEffect } from 'react'; const ScrollControlComp.. 2024. 1. 24. 이전 1 2 3 4 5 ··· 15 다음
