React

React - react-router-dom

이번 포스팅에서는 react-router-dom에 대해 알아보고자 한다. react-router-dom은 SPA 앱을 만들 때 많이 사용되는 패키지이며 특정 URI로 접근했을 때 원하는 컴포넌트를 랜더링해주기 위한 용도로 사용한다. 우선 VSCode 에디터에서 npm install을 이용해 react-router-dom을 설치해주도록 하자. npm install react-router-dom 이 글을 포스팅하는 시점에서 react-router-dom의 버전은 V6 이다. 향후 버전 업이 될 경우 사용법이 조금 달라질 수 있으니 참고하도록 하자. // App.js import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom' ..

React - Custom Hook

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

React - useCallback & useMemo

이번 포스팅에서는 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

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

React - Lifecycle & useEffect

이전 포스팅에서 함수 컴포넌트와 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..