주니어개발자성공하자

👉 장점 로직을 재사용할수 있다 관리가 용이하다 함수안에 다른 함수를 호출하여 새로운 hook을 만들수있다. 기존 class component는 여러단계의 상속으로 이루어져 복잡성과 오류가능성을 증가시켰다. function component는 클래스 컴포넌트가 가지고있는 기능들을 모두 사용할수있고 복잡성과 재사용성의 단점들을 해결했다

전 게시물인 useMemo와 비슷한 Hook입니다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 재사용 하고 싶을 때 사용합니다. 메모이제이션 const memoizedCallback = useCallback(함수, 배열); 첫번째 인자는 함수를 두번째 인자는 넘어온 배열의 값이 변경 될 때까지 저장하여 재사용 할 수 있다. 예를 들어 컴포넌트 함수안에 함수가 선언되어 있다면 이 함수는 컴포넌트가 랜더링 될 때 마다 새로운 함수가 생성된다. const add = () => x + y; 하지만 useCallback을 사용하면 해당 컴포넌트가 랜더링 되더라도 의존 배열이 바뀌지 않는한 기존 함수를 계속 반환합니다. x와 y 값이 바뀌면 새로운 함수가 생성되어..

성능 최적화를 하는 방법은 여러개가 있다 그 중에서 useMemo라는 Hook을 사용하여 재사용하는 방법을 알아보자. Memoization 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다 적절히 사용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. 아래 컴포넌트는 인자로 넘어온 x와 y값을 compute함수에 넘겨서 z값을 구한 다음 z를 출력해준다. function MyComponent({ x, y }) { const z = compute(x, y); return {z}; } 만약에, compute 함수가 매우 복잡한 연산을 수행하기 때문에 결과값을 리턴하는데 시간이 오래걸리게 된다면 어떻게..

useEffect라는 Hook을 사용하여 컴포넌트가 마운트되거나 언마운트 됐을때, 또 업데이트가 되었을때 특정 작업을 처리하는 방법에 대해 알아보자 마운트 / 언마운트 useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps를 넣는다. 만약 deps를 위와같이 비워두게 되면 처음 마운트 됐을때만 호출된다. useEffect에서는 함수를 반환 할 수 있는데 이름 cleanup 함수라고 부른다. 후처리라고 생각하면 편하다. deps 에 특정 값 넣기 useEffect(() => { cons..