🐕 useEffect안의 콜백함수는 항상 함수를 반환해야한다. 하지만 async 함수는 프로미스를 반환하기 때문에 useEffect(async () => {}) 이와 같은 형식으로 작성하는 경우 useEffect는 반환문으로 함수를 반환해야하지만 프로미스를 반환하게 되어 오류를 만나게 될 가능성이 높아집니다. 👻그럼 async는 어떻게 씀 useEffect(() => { const process = async () => { setLoading(true); try { const resolved = await promiseCreator(); setResolved(resolved); } catch (e) { setError(e); } setLoading(false); }; process(); // eslint..
🐕 SPA의 등장 배경 싱글 페이지 어플리케이션...은 전통적인 HTML로 구성된 페이지와 조금 많이 다릅니다. 전통적 방식은 MPA(Multi Page Application)이라고 부르는군요! 대표적으로 SPA로 구성된 웹페이지를 떠올려보면 페이스북...정도가 떠오르네요 원래는 사용자가 웹사이트내의 다른 페이지로 이동하면 HTML 파일로 된 페이지의 전체를 다 불러와야 했습니다. 레이아웃이 크게 다르지 않다면 이건 리액트에서 안바꿔도될 애들까지 다 리렌더링하는수준의 비효율성이었을거에요 웹이 발전하면서 사용자와 웹 간의 많은 상호작용이 필요했습니다. 하지만 이런 상호작용은 비용이 저렴하지 않아요 따라서 불필요한 렌더와 트래픽은 최대한 피하는게 좋을 것이고 그렇기 때문에 업데이트에 필요한 데이터만 서버에서..
🐕 렌더할 데이터가 많다면? function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); 간단한 리액트 투두 리스트 앱을 저번에 만들어봤는데 다음 차트는 성능 최적화 부분이었습니다. 만약 2500개의 데이터를 렌더링하면?? 안타깝게도 제 사이트는 1~2초 정도의 렉이 발생하고 뭔가 이벤트를 발생시켜도 느리게 동작해요 이걸 해결하는 것이 중요하겠네용 👻리액트에서 성능을 체크하는 법 먼저 크롬 확장에서 React DevTools를 설치해주고 개발자도구를 켜서 Profiler를 켜줍니다. 전 하도 안되서 새로고침해봤는데 새로고침하니까 잘되네요 녹화버튼을 누르..
🐕 라이프사이클은 1. 모든 리액트 컴포넌트는 라이프 사이클(수명주기)가 존재한다. 2. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 그런데 우리가 리액트 프로젝트를 하다보면 1. 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야하거나 2. 컴포넌트를 업데이트한 전후로 어떤 작업을 처리하거나 3. 업데이트를 방지해야하거나 같은 상황을 마주할 수 있어요 바로 이럴 때 클래스형 컴포넌트에서는 라이프 사이클 메서드를 이용해 처리를 해줍니다. 함수형 컴포넌트에서는 못써요 대신에 비슷한 작업을 Hook으로 처리할 수 있습니다. 👻라이프 사이클 메서드 9가지 라이프 사이클 메서드는 총 아홉가지가 있습니다. will 접두사가 붙은 메서드들은 어떤 작업을 작동하기 ..
🐕 커스텀훅 우리가 함수를 만드는 것처럼 훅을 커스텀해서 만들 수 있다. 함수 안에 이름을 지어주고 원하는 로직을 만들어주면 끝이다. 다만 커스텀 훅을 만들 때 주의할 점이 있는데 함수의 이름 시작을 use로 만들어줘야한다는 것이다. 네이밍이 어긋나게 되면 오류가 발생했을 때 리액트에서 적절한 경고메시지를 받을 수 없고 또 함수를 쓰는 당사자인 개발자가 코드를 읽기 어려워질 수 있기 때문이다. 👻간단하게 커스텀 훅을 작성하자 useInput.js import React, { useState } from 'react'; export function useInput(initialValue) { const [inputValue, setInputValue] = useState(initialValue); cons..
🐕 useCallback을 쓰는 시점 useMemo와 비슷하게도 메모이제이션을 기반으로 한 훅입니다. 캐싱해둔 값을 그대로 사용하는 건데... useCallback은 콜백함수 그 자체를 메모이제이션 해줍니다. useMemo가 return 값을 메모이제이션 해주는 것과는 살짝 대비가 되는 느낌 컴포넌트가 다시 렌더링 되더라도 함수가 초기화되는걸 막을 수 있다. 이후에 렌더링이 될 때는 이전에 이미 만들어둔 함수 객체를 계속 유지하면서 사용할 수 있다. 이걸 왜 써야할까요? 1. 함수 컴포넌트는 상태변화시 다시 렌더링된다. 2. 렌더링 될 때 함수 내부 변수는 초기화된다. 3. 따라서 렌더링 전 변수와 렌더링 후 변수는 메모리 주솟값이 다르다. 4. useEffect 등에서 사용하는 의존성 배열은 주솟값이 ..
🐕 useMemo는 왜 언제 써야 할까? useMemo의 Memo는 Memoization의 memo이다. 메모이제이션...DP를 공부할 때 같이 봤던 기억이 새록새록 난다. 메모이제이션이란 이미 해서 답을 구한 값을 또 계산하는 비효율을 막기 위해 이전의 답들을 기억하는 기법이다. 당연하게도 메모이제이션을 하기 위해서는 어딘가에 정보를 저장해두어야하고 그 어딘가라는 공간은 컴퓨터세계에선.. 한도가 존재한다. 메모이제이션을 통해 기존값을 재활용하면서 연산속도를 증가시킬 수 있지만 그 반대급부 또한 존재하는 기법이라는 것! 그리고 이 문제는 곧바로 useMemo에도 적용된다. 👻useMemo를 사용하면 좋은 시점 리액트의 함수형 컴포넌트는 결국엔 함수입니다. 그렇기 때문에 결국 리렌더링이 되면서 함수가 재호..
🐕 useReducer를 사용하면.. 너무 복잡한 state를 다뤄야할 때 유용합니다. 따라서 간단한 상태를 관리할 때에는 useState만으로도 충분하고 굳이 신경쓸 필요없이 익숙한 useState를 써도 좋지만 useState로 관리하려고하면 너무 코드가 길어질 때 쓰면 좋겠네요 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른값으로 업데이트 해주고 싶을 때 사용하는 Hook으로 리듀서는 현재상태와 액션값을 전달받아 새로운 상태를 반환하는 함수입니다. const reducer = (state, action) { return { ... } // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다. 이렇게 쓰면 되는데 state는 뭐 그렇다쳐도 action은 좀 생소합니다. act..
