Dog foot print

useEffect 란 ? useEffect 함수는 렌더링 이후 컴포넌트와 외부의 시스템을 연결해주기 위해 만들어진 훅이다. 별도로 컨트롤이 가능하다면, “useEffect”를 사용해, 사이드 이펙트를 발생시키기도 한다. useEffect Types function useEffect(effect: EffectCallback, deps?: DependencyList): void; // type EffectCallback = () => (void | Destructor); type DependencyList = ReadonlyArray; // type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; useEffect는 첫번째 인자인 effect는 렌더..

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

서론 : 나는 React를 학원에서 처음 배울 당시 클래스 형 컴포넌트를 이용하여, web app을 작성하였다.그 당시에도 Hook이 존재는 하였지만, CRA에서는 Hook을 지원하기 전이였고, 함수형 컴포넌트는 아직 보완할 점이 많아 React 사용자들에게는 뜨거운 감자 같은 것 이었다. 시간이 흘러 CRA에서 Hook을 공식지원하게 될 때, 나 또한 Hook에 발을 담가 보았지만, class형으로 만든 내 코드는 여전히 잘 동작 하였기에 나의 주목을 끌지 못하였다. 2020년 하반기 많은 것들이 변화하였다. Class형으로 작성한 내 코드는 규모가 커질 수록 관리하기 매우 어려웠으며, 빌드 속도가 증가하는 등 많은 이슈가 내 앞으로 다가왔다. 또한 Typescript 공부 할 수록, 함수형 컴포넌트와..