컴퓨터/Frontend14 [React] 최적화(4) - 프롭스 드릴링(Props Drilling) 프롭스 드릴링(Props Drilling)이란 상위 컴포넌트가 하위 컴포넌트로 Props를 전달할 때 발생하는 구조적 문제를 말한다. 예를 들어, 최상위 컴포넌트가 직계비속 중 사촌쯤 되는 하위 컴포넌트에게 데이터를 전달해야 한다고 생각해 보자. 이 데이터는 최상위 컴포넌트의 하위(자식) 컴포넌트를 경유하고 또 그 컴포넌트의 자식을 건너고, 또 일촌을 건너야 비로소 전달되는 구조적인 문제를 갖고 있다. 즉, 그저 경유하기만 하는 컴포넌트가 최소 2개나 있다는 뜻이다. 여기서 만약 상태 데이터의 이름이나 직/간접적으로 참조하고 있는 함수의 이름이 변경되어야 한다면 어떤 문제가 발생할까? 이 데이터가 경유하고 있는 모든 컴포넌트를 열어 하나씩 수정해야 하는 아주 끔찍한 일이 발생할 것이다. 이를 프롭스 드릴.. 2023. 3. 28. [React] 최적화(3) - useCalback, 함수형 업데이트 지난 시간에 React.memo 훅을 이용한 고차 컴포넌트에 대해 알아봤다. 간단히 복습해 보면 React.memo는 불필요한 렌더링을 최소화하기 위해 사용되는 훅킹 함수로, 결과적으론 메모이징된 컴포넌트 자체를 반환했었다. 이렇게 반환된 컴포넌트는 다른 컴포넌트로 전달될 수 있으며, 이처럼 컴포넌트를 받는 컴포넌트를 고차 컴포넌트라 불렀다. React.memo 훅은 앞에서 알아본 대로 굉장히 유용하지만 한 가지 단점을 갖고 있다. 그 특성상 비원시 타입(배열 또는 구조체 등)에 대해 얕은 비교를 수행한다는 점인데 즉, 실질적인 데이터가 아닌 주소를 비교하여 부모의 리렌더링으로부터 재생성되는 함수에 대해서는 정확한 예외처리를 하지 못한다는 것이다. 만약 위와 같은 상황에서 Props로 함수를 전달받는 컴.. 2023. 3. 27. [React] 최적화(2) - Raect.memo 리액트 메모이제이션에 대해 알아보자. 리액트 공식 사이트에서 설명을 찾아보면 React.memo는 고차 컴포넌트라고 나와있다. 여기서 말하는 고차 컴포넌트란 무엇일까? 일단 컴포넌트는 실행 가능한 독립적인 기능을 말한다. 최상위 컴포넌트를 제외한 나머지 컴포넌트는 언제나 부모(상위)로부터 호출되고 자신만의 동작을 수행한다. 이때 컴포넌트의 호출부에서 Props라는 속성 값을 전달할 수 있으며 이 값은 대개 본인의 의지와 상관없이 부모가 리렌더링 될 때마다 재전달 된다. 이로 인해 렌더링이 불필요한 컴포넌트도 다시 렌더링 작업을 수행하게 되는데 위에서 말한 고차 컴포넌트는 이런 작업을 최소화한 컴포넌트라 보면 된다. React.memo가 생성한 컴포넌트는 기존에 전달된 Props를 기억할 수 있는 능력을 .. 2023. 3. 24. [React] 최적화(1) - useMemo 메모이제이션을 이용한 최적화 방법에 대해 알아보자. 보통 알고리즘 공부할 때 배우는 건데 리액트에서 최적화 문제를 해결할 때도 사용된다고 한다. 메모이제이션에 대해선 이미 알고 있으니 어떻게 사용되는지만 알아보자. 리액트 자체적으로 지원하는 훅 기능을 이용하는데 useMemo를 불러온 후 최적화가 필요한 때에 적절히 이용하기만 하면 된다. 아래 예시를 보자. 1 import React, {useMemo, useEffect, useState} from "react"; 2 3 const [data, setData] = useState([]); 4 5 const getApiRef = async()=>{ 6 const res = await fetch("https://small-pond.tistory.com")... 2023. 3. 23. [Javascript] 비동기 처리(3) - async, await 이전 글에서 return new Promise 구문을 통해 약속된 객체를 생성하고 리턴값을 활용하는 방법에 대해 알아봤다. 이 방법 외에도 async 키워드를 활용한 비동기 처리 방법이 있다고 한다. 해당 키워드가 붙는 함수의 경우 결과 값을 Promise 객체에 담아 리턴하는데 똑같이 then 메서드를 이용해 접근할 수 있다. 아래 예시를 보자. function displayText(){ return "Display Text On Window" } async function AsyncDisplayText(){ return "Display Text On Window" } console.log(displayText(), AsyncDisplayText()); 둘 다 같은 값을 리턴하는데 콘솔로 출력해 보면 .. 2023. 3. 18. [Javascript] 비동기 처리(2) - Promise 객체 콜백 함수를 연속적으로 호출해야 되는 환경에서 구현 복잡도를 낮추고 가독성을 높일 수 있는 방법이 있다고 한다. 바로 객체를 이용한 방법인데, 약속된 객체를 사용함으로써 해당 함수가 비동기 처리를 하고 있음을 나타내고 분리된 결과 값을 만들어 낼 수 있다. 이때 결과값은 비동기 처리가 성공/실패 했을 때의 값으로 나뉘며 Promise 객체는 자신을 생성한 주체 함수로 전달된 인자를 그대로 사용할 수 있다. 구조적인 콜백 함수의 특성을 객체 지향적으로 분리한 방법인듯 보이는데, Promise라는 객체를 반환함으로써 이를 오브젝트로 저장할 수 있게끔 만든 것이다. 일단 예시를 보자. 지난 글과 비교해보면 더 이해하기 쉬울 것이다. function A(a,b){ return new Promise((suc, f.. 2023. 3. 18. 이전 1 2 3 다음 반응형