분류 전체보기229 [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. [React] Context API란 무엇일까? 1. Context API란 무엇일까 Context API는 React에서 제공하는 내장 API로 전역으로 데이터값을 공유할 수 있게 한다. React에서는 컴포넌트에 props로 데이터를 넘겨줄 수 있는데 만약 부모로부터 자식A > 자식B > 자식C > 자식D 이런 형식의 하위의 한참 하위 컴포넌트에게 props를 전달하고 싶은 경우가 있다고 하자. 그러면 자식D까지 도달하기 위해 지나는 모든 컴포넌트에 일일이 props를 넘겨주는 번거로운 행위를 해야할 것이다. 이런 현상을 dril로 뚫는 것 같다해서 props drilling이라고 하는데, Context API를 사용하면 전역으로 데이터를 공유할 수 있기 때문에 이러한 props drilling을 방지할 수 있는 것이다. Context API를 통.. 2024. 1. 23. [React] useEffect 사용 시 주의할 점 1. useEffect란 React 개발하다보면 안써본 적이 없는 사람이 없을 useEffect에 대해 알아보려고 한다. useEffect란 React에서 기본적으로 제공해주는 hook으로, 함수 컴포넌트에서 부수효과를 처리하기 위해 사용된다. 컴포넌트가 렌더링 될 때마다 어떤 특정한 작업을 할 수 있도록 하는 hook인데 컴포넌트가 mount 됐을 때, unmount 됐을 때, update됐을 때 특정한 작업(부수효과)를 처리할 수가 있다. 클래스형 컴포넌트의 생명주기 메서드를 함수형 컴포넌트에서도 유사하게 사용할 수 있는 hook인 것이다. useEffect도 의존성 배열을 인자로 받는데, 의존성 배열이 빈배열일 경우에는 최초 렌더링 시 한번만 실행이 되고, 의존성 배열에 특정 상태를 넣어주게 되면 .. 2024. 1. 22. [React] useMemo와 useCallback React로 개발하다보면 많이 들어봤을 useMemo와 useCallback은 성능최적화를 위해 사용되는 hook인데, 적재적소에 잘 활용하면 불필요한 리렌더링, 함수 재생성을 방지할 수 있지만 무분별하게 사용한다면 오히려 성능최적화에 방해가 될 수 있다. 그렇다면 useMemo와 useCallback이 무엇이고, 언제 사용해야 하며 언제 사용하면 안되는 걸까? 1. useMemo란? React에서 제공하는 hook 중 하나로 계산비용이 높은 연산결과를 메모이제이션하여, 불필요한 연산을 최소화하는 hook이다. useMemo를 사용해서 결과값을 캐싱하면 렌더링 중에 값이 한번만 계산이 되며 이 후에 렌더링할 경우 의존성배열의 값이 달라지지 않는다면 이 전에 연산했던 값을 그대로 재사용한다. React에.. 2024. 1. 19. [React Native] Expo cli로 App Build 하기 Expo란? Expo는 React Native을 기반으로 더욱 쉽고 빠르게 앱서비스를 개발할 수 있게 도와주는 도구로, 앱개발에 필요한 여러가지 기능 들을 제공하고 있다. 예를 들면 카메라, 위치, 알람 등 다양한 기능을 구현할 때 도움을 주는 API 등이 있다. 만약 React Native 앱을 Expo로 개발했다면 Build 할 때도 Expo에서 제공하는 서비스로 쉽고 간단하게 App을 Build 할 수 있다. Expo로 App을 Build하기 위해서는 우선 expo-cli 를 설치해야 한다. 1) 전역으로 Expo Cli 설치 npm install -g expo-cli Expo Cli 설치가 완료가 되었다면, Expo에서 EAS 즉 Expo Application Services라는 빌드&배포 서비스.. 2024. 1. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 39 다음
