NYchicken's blog ;

컴포넌트 최적화에 사용되는 hook은 useMemo와 useCallback이 있다. 이번엔 useMemo 를 다룬다! useMemo 란? useMemo의 Memo 는 memoization 을 의미한다. 동일한 값을 리턴하는 함수를 반복적으로 호출해야할 때, 맨 처음으로 값을 계산할 때 그 값을 메모리에 저장해 필요할 때 마다 메모리에서 꺼내 쓰는 기법이다. 혹은 자주 쓰는 값을 맨 처음 계산할 때 캐시메모리에 저장해 재사용하는 것이다. 렌더링이란 Component 함수가 호출되는 것이다. 이렇게 함수가 호출될 때 마다 내부에서는 모든 변수가 초기화 되는 상황이 발생한다. 컴포넌트가 반복적으로 호출되어도 초기화 되지 않게끔 우리는 useMemo 를 사용할 수 있다. useMemo 동작 순서 1. Compo..

useContext 를 사용해야하는 이유 React 컴포넌트는 부모에서 자식으로 props 를 통해 데이터를 전달해야한다. 이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다. 중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트 까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... 하지만 Context 를 사용하게 된다면 컴포넌트의 재사용성이 떨어지므로 잘 생각..

Hook은 React 16.8 버전부터 새로운 요소로 추가되었다. 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 된것! useEffect 훅이란? 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있게 하는 Hook이다. useEffect를 사용하게 되면 함수형 컴포넌트에서 부가기능(side effect) 를 사용할 수 있게 된다. 이때의 특정 작업(side effect)란 렌더링 된 이후에 비동기로 처리되어야하는 부수적인 효과들을 의미한다. useEffect 안에 적는 코드들은 - 복잡한 알고리즘 연산을 해야하는 경우 - 서버와 통신해 데이터를 가져오는 경우 - 타이머를 장착해야하는 경우 - ... 이제 함수형 컴포넌트에서도 생명 주기 메..