이번 포스팅에서는 React에서 제공해주는 내장 Hook이 아닌 자신만의 Hook을 만드는 방법에 대해 다뤄보고자 한다. React에는 "사용자 정의 Hook" 이라는 개념이 존재한다. 이는 React에서 제공해주는 Hook이 아닌 사용자가 직접 만든 Hook을 지칭하며 "사용자 정의 Hook" 혹은 "커스텀 Hook (Custom Hook)"이라 불린다. 자신만의 Hook을 만들어서 사용하면 컴포넌트 로직을 함수로 뽑아내어 재사용 할 수 있게 된다는 점에서 상당한 이점이 있다. Custom Hook 커스텀 Hook을 사용하면 무엇을 매개변수로 받을 것인지, 무엇을 반환할 것인지 직접 결정할 수 있다. 그리고 커스텀 Hook 안에서 다른 Hook을 호출하는 것 역시 가능하다. 다시 말해, 커스텀 Hook..

이번 포스팅에서는 useCallback 과 useMemo라는 내장 Hook에 대해 알아보도록 하겠다. Memoization useCallback useMemo 1. Memoization useCallback 과 useMemo 함수에 대해 알기 위해서는 우선 프로그래밍에서 사용하는 메모이제이션(memoization) 기법에 대해 짚고 넘어가야 할 필요성이 있다. 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 메모이제이션의 대표적인 예로 피보나치 수열 함수를 들 수 있다. function fibo(n) { if (n==1) return 1 if (n==2) ..

이번 포스팅에서 알아볼 것은 React에서 제공해주는 useContext 와 useReducer라는 내장 Hook이다. useContext useReducer 1. useContext useContext는 React에서 제공해주는 내장 Hook 중의 하나로 전역 상태 관리를 도와주는 함수이다. 일반적으로 React 애플리케이션에서는 데이터가 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달된다. 만약 애플리케이션 안의 여러 컴포넌트들에게 전해줘야 하는 props가 있다면 이러한 전달 방식은 상당히 번거로울 수 있다. 이 때 사용하는 것이 바로 context라는 것이다. context를 이용하면 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많으 컴포넌트들이 데이터를 공..

이전 포스팅에서 함수 컴포넌트와 useState에 대해 알아보았다. 2022.04.26 - [React] - React - 함수 컴포넌트 React - 함수 컴포넌트 이번 포스팅에서는 함수 컴포넌트에 대한 개념에 대해 알아보고 이를 이용해 Counter 버튼을 만들어 보고자 한다. 우선 VSCode 터미널에서 npx create-react-app을 이용해 React app을 설치해주도록 하자. 그 bitkunst.tistory.com 이번에 알아볼 것은 React에서 제공해주는 또다른 내장 Hook인 useEffect 이다. Lifecycle (생명주기) useEffect 1. Lifecycle (생명주기) useEffect 함수에 대해 알아보기 위해서는 우선 React에서 얘기하는 Life..

이번 포스팅에서는 함수 컴포넌트에 대한 개념에 대해 알아보고 이를 이용해 Counter 버튼을 만들어 보고자 한다. 우선 VSCode 터미널에서 npx create-react-app을 이용해 React app을 설치해주도록 하자. 그 후 npm run start를 이용해 React app을 실행시켜 제대로 설치가 되었는지 확인해보면 된다. npx create-react-app [디렉토리명] npm run start 함수 컴포넌트 props & children useState를 이용해 카운터 만들기 1. 함수 컴포넌트 함수 컴포넌트는 기존에 사용했던 클래스 컴포넌트와 다르게 함수를 이용해서 component를 생성한다. JavaScript에서 함수를 만들던 방식 그대로 함수를 만들어서 comp..