✨ 성능 최적화를 해야하는 이유React 앱을 만들다보면 성능이 중요한 문제가 될 때가 있다. 리액트에서는 컴포넌트의 상태가 변경될 때마다 렌더링 과정을 거치게 되는데, 이 과정 중에 변화가 없는 컴포넌트까지 불필요하게 렌더링되는 경우가 존재한다. 그리고 복잡한 계산이나 데이터 처리는 애플리케이션의 반응 속도를 늦출 수 있어 사용자 경험을 저해할 수 있다. 따라서 이를 위해서 useMemo, useCallback, React.memo라는 기능을 제공하고 있다. 세 가지가 어떻게 다른지 어떤 방식으로 쓰이는지 알아보자! 📝 useMemouseMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용되는 훅이다. 여기서 memo는 memoization을 뜻하는데 "메모리에 넣기"라는 의미이며 컴퓨터가 동일한..

부트캠프에서 했던 마지막 프로젝트에서 검색 기능을 맡게 되었다!일반적으로는 엔터를 누르거나 검색 버튼을 눌러야 결과가 나오는 방식이 많지만,이번에는 실시간으로 입력할 때마다 결과가 나타나는 방식으로 구현하게 되었다. 처음에는 검색창에 글자를 입력할 때마다 바로 API 요청을 보내는 방식으로 구현했었는데, 이렇게 하니 글자를 하나 칠 때마다 요청이 계속 발생해서 네트워크 탭이 수많은 API 요청으로 도배되는 상황이 벌어졌다 🫢이걸 어떻게 해결할 수 있을까 고민하다가 debounce 라는 개념을 알게 되었고, 입력이 끝난 뒤 일정 시간 동안 추가 입력이 없을 때만 요청을 보내는 방식으로 수정해 최적화를 할 수 있었다. 🤔 Debounce디바운스는 과도한 요청으로 발생할 수 있는 과부하, 성능의 저하..

공모전으로 냈었던 프로젝트를 리팩토링하기 시작했다 !어느부분부터 성능 개선을 하면 좋을까 하다가 초기 로딩 속도가 너무 느린 것 같아, lazyloading을 적용해보기로 하였다. 🤔 Code Splitting 이란 ?코드 스플리팅이란 하나의 큰 자바스크립트 파일을 여러 개의 작은 파일로 나누고, 필요한 시점에 필요한 코드만 로드할 수 있도록 하는 기술이다. React는 SPA(Single Page Application)구조이기 때문에 처음 로드될 때 모든 페이지의 코드가 한 번에 불러와져야 사용자가 화면을 볼 수 있다. 하지만 초기 로딩 시 번들 파일의 크기나 수가 많아지면, 로딩 시간이 길어지고 사용자 경험이 저하되는 문제가 발생할 수 있다. 예를 들어 사용자가 /mypage에 진입한 경우 실제로..

useCallbackuseCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useMemo 에서 작성했던 Average 컴포넌트의 경우, 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다. 이 방식의 경우 크게 문제는 없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. useCallback 사용하기const onChange = useCallback(e=>{ setNumber(e.target.value); }..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용하는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻한다. memoization을 잘 활용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. useMemo의 구조 const value = useMemo(()=>{ return calculate(); },[item]) useMemo는 useEffect처럼 첫 번째 인자로 함수인 calculate()를 호출하여 결과값을 반환한다. calculate 함수는 여기서 비용이 많이 드는 계..

useReducer 이전까지 상태를 업데이트 할 때는 useState를 사용해서 새로운 상태를 설정해주었는데, 상태를 관리할 때 useState를 사용하는 것 말고도 다른 방법이 있다. 바로 useReducer을 사용하는 것인데, useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state,actio..

Hooks React Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능을 할 수 있게 해준다. 훅을 사용하면 클래스 컴포넌트보다 훨씬 더 간결하고 직관적인 코드를 작성할 수 있어, 프로젝트의 유지보수를 높일 수 있다. 지난번 글에서 다뤘던 useState도 React Hooks의 한 종류이며, 리액트의 가장 대표적인 Hook으로 useState와 useEffect를 꼽을 수 있다. 이외에도 useReducer, useMemo, useCallback, useRef등 다양한 훅이 있으며 오늘은 useEffect에 대해 다..

State란? State란 리액트에서 이벤트에 의해 변경되는 동적인 값이다. const, let 등으로 선언한 변수와 다르게 State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 변경된 부분을 재렌더링하여 화면을 바꾼다. props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, State는 하위 컴포넌트도 데이터를 변경할 수 있다. 함수형 컴포넌트는 'useState'라는 React Hook을 사용하여 State를 다룰 수 있다. useState 사용하기 1. 파일 위쪽에 useState를 import 해준다. import { useState } from "react"; 2. useState 구문을 사용한다. const [state,setState]=useState(초기값); s..

Routing 라우팅이란, URL에 따라 그에 상응하는 화면을 전송해주는 것을 말한다. 쉽게 말해, 링크를 입력하면 그 링크로 이동시켜주는 역할을 한다. 라우팅은 SPA(Single Page Application)를 구현하는 데 필수적이며, SPA는 초기 로딩 시에 서버에서 모든 컨텐츠를 불러오는 것이 아닌 필요한 데이터만 가져와 화면을 구성하기 때문에, URL에 따라 다른 화면을 보여주는 라우팅이 필요하다. 리액트에서는 라우팅 기능을 사용하기 위해 react-router 라이브러리를 따로 설치해줘야 한다. SPA(Single Page Application)이란? SPA는 단일 페이지 어플리케이션으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미한다. 사용..

1. Components 리액트는 컴포넌트로 구성된다. 컴포넌트는 UI를 작은 조각으로 나눈 것으로, 이러한 컴포넌트들을 조합하여 전체 애플리케이션을 구성한다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 개념적으로는 자바스크립트 함수와 유사하지만 리액트 컴포넌트의 입력과 출력은 일반적인 자바스크립트와는 차이점이 있다. 리액트에서의 입력은 Props, 출력은 React element가 된다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트로 나뉜다. 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 함수로 props 객체 인..