[프리온보딩] Memoization

Memoization Memoization란? Memoization은 특정한 값을 저장해뒀다가, 이후에 해당 값이 필요할 때 새롭게 계산해서 사용하는게 아니라 저장해둔 값을 활용하는 테크닉. useMemo useMemo는 리액트에서 값을 memoization 할 수 있도록 해주는 함수. // useMemo(callbackFunction, deps] const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); useMemo는 두가지 인자를 받는다. 첫번째 인자는 콜백함수이며 이 함수에서 리턴하는 값이 메모된다. 두번째 인자는 의존성 배열이다. 메모이제이션을 할 때 주의해야 할 점은 만약 새로운 값을 만들어서 사용해야 하는 상황임에도 불..

• format_list_bulleted 대외활동/[KT AIVLE School] 프리온보딩 프론트엔드
• · 2023. 11. 30.
• textsms

[프리온보딩] React.memo

React.memo React.memo 란? 리액트는 state가 변할 경우 해당 컴포넌트와 하위의 컴포넌트들을 모두 리렌더링한다. 그런데 state가 변한 컴포넌트의 경우 당연히 UI의 변화가 있을 것이기에 리렌더링을 해야 하지만, 하위 컴포넌트의 경우에는 경우에 props가 변화하지 않았다면 해당 컴포넌트가 UI가 변화하지 않았을 수도 있을 것이다. 이런 경우에는 굳이 새롭게 컴포넌트 함수를 호출할 필요 없이 이전에 저장되어 있던 결과를 그대로 사용하는 것이 효율적이다. 하지만 UI가 실질적으로 변화되었는지 안되었는지를 매번 리액트가 렌더링 과정에서 일일이 모든 컴포넌트 트리를 순회하면서 검사하는 것은 비효율적이기 때문에, 리액트에서는 개발자에게 이 컴포넌트가 리렌더링이 되어야 할지 아닐지에 대한 여..

• format_list_bulleted 대외활동/[KT AIVLE School] 프리온보딩 프론트엔드
• · 2023. 11. 30.
• textsms

[프리온보딩] React 렌더링 최적화

렌더링 렌더링이란? 리액트에서 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미한다. 브라우저는 DOM요소를 계산하고 그려내는 렌더링 과정을 거치고, 우리는 브라우저에서 제공하는 DOM API를 자바스크립트를 통해 호출해 화면을 변화시킨다. 하지만 Vanila JavaScript를 이용해 DOM에 직접 접근하고 최적화하는 것은 애플리케이션 규모가 커질수록 관리하기 힘들다. 때문에 핵심 UI를 선언하기만 하면 DOM을 조작해서 UI를 그려내고 변화시키는 일은 라이브러리나 프레임워크가 대신해주는 방식을 찾게 됨. React, Vue, Angular 등이 등장하게 된 이유. 리액트에서 리렌더링 되는 시점 리액트에서 state를 사용하는 이유는 UI와 상태(state)를 연동시키기 위함이다. UI와 연동 되어..

• format_list_bulleted 대외활동/[KT AIVLE School] 프리온보딩 프론트엔드
• · 2023. 11. 23.
• textsms

[Front-End] Netlify build 에러 해결하기

이전에 포스팅했던 글에 이어서, build 하면서 생겼던 에러와 해결 방법에 대해 써보도록 하겠당. 에러는 Builds → Go to deploy details → Deploy log에서 자세히 확인 가능하다. 발생한 에러 1. babel-preset-react-app 경고 @babel/plugin-proposal-private-property-in-object 패키지를 종속성 선언 없이 가져와서 발생하는 문제. 아래 코드 실행 후, 해결 npm install @babel/plugin-proposal-private-property-in-object --save-dev ✨참고 :

• format_list_bulleted 프로젝트
• · 2023. 11. 15.
• textsms