Dog foot print

Memoization이란 ? useCallback, useMemo, React.memo 와 같은 기능에서 사용되는 memo 라는 개념은 파라메터를 기준으로 이전에 리턴한 해당 함수의 결과값을 리턴하는 개념이다. 순수함수는 파라메터가 동일할 때, 리턴값은 언제나 같다”라는 특징이 있다. 이런 특징을 이용해 연산이 오래걸리는 함수가 이전에 동일한 파라메터로 연산한 결과가 있다면 이전 리턴값을 줌으로써 연산에 필요한 시간을 단축할 수 있게 된다. 아래는 버튼을 클릭 할 때 마다 input값을 숫자로 변경해 O(2^n) 의 시간 복잡도를 가지는 fivo 함수의 결과가 출력되는 코드이다. function fivo(n : number) : number{ console.log("FivoStart") function ..

서론 App의 컴포넌트 트리가 혹시 길어지는 것을 경험 해본 적이 있는가 ? 짧은 토이 프로젝트의 경우 컴포넌트 노드의 레벨이 3정도 될 것이다. 이런 경우 root component에서 최 하위 컴포넌트 노드에게 정보를 전달 해주기 위해, props를 각 레벨의 컴포넌트 노드에게 전달 해준 경험이 존재 할 것이다. 그렇게 어려운 일도 아니고, props를 각 컴포넌트에게 전달 하면 장땡이다 ! 이처럼 짧은 거리의 컴포넌트에게는 props로 데이터를 전달해주는 것은 충분하다. 그러나 트리의 높이가 4이상을 넘어가게 되면, props로 상위 컴포넌트의데이터를 전달해주는 것은 매우 힘들다 . 불가능하다는 이야기가 아니다. 코드가 지저분해지고, 이를 하위 프롭스로 전달하는 과정에서, 개발자의 실수로 유지하지 ..