React 썸네일형 리스트형 React Hook 정리 - 컴퍼넌트 최적화 (React.Memo) 어떤 한 컴퍼넌트에 다른 하위 컴퍼넌트를 포함하고 있을 때 상위 컴퍼넌트가 값(props)이 변경되어 재 렌더링되면 부득이하게 값의 변경 없는 하위 컴퍼넌트도 불필요한 렌더링을 할 수 있다. 이럴 때 React.memo를 사용한다. React.memo는 React에서 제공하는 HOC(High Order Component) 고차 컴퍼넌트이다. 고차컴퍼넌트란 어떤 컴퍼넌트란 어떠한 컴퍼넌트를 인자로 받아 새로운 컴퍼넌트를 반환하는 컴퍼넌트이다. React.memo라는 HOC에 컴퍼넌트를 넣으면 UI나 기능적으로는 동일하나 최적화된 컴퍼넌트를 반환하는 것이다. https://ko.legacy.reactjs.org/docs/higher-order-components.html 고차 컴포넌트 – React A Ja.. 더보기 React Hook 정리 - useReducer useState와 같이 상태 관리하기 위한 또다른 Hook 여러개의 하위값을 포함하는 복잡한 state를 관리할때 useReducer를 사용하면 코드 관리가 용이하다. useReducer는 아래 3가지 요소로 이루어져있다. 1. Reducer - State를 update해주는 역할. Component의 state는 반드시 Reducer를 통해 update해야한다. 2. Dispatch - 사용자가 Reducer에게 요청하는 행위. 3. Action - Dispatch를 통해 요청하는 내용. Dispatch (Action) ---------> Reducer(State, Action) -> Update State /* * userRecuder는 배열을 반환한다. like useState * 반환되는 배열 요.. 더보기 React Hook 정리 - useCallback 지난 번 useMemo와 함께 Memoization 기법을 활용해 컴퍼넌트를 최적화시켜주는 훅이다. useMemo의 경우 값을 Memoization하여 재사용할 수 있다면 useCallback은 함수를 재사용할 수 있게 해준다. const plusone = (num) => { return num + 1; }; const plusone = useCallback((num)=>{ return num + 1; }, [item]) 위 코드와 같이 plusone을 useCallback으로 함수를 감싸서 사용하면 된다. useCallback()은 2개의 인자를 받는다. 하나는 우리가 Memoization해야 할 콜백함수, 두번째는 의존성 배열이다. 즉, 의존성 배열의 값이 변경되지 않는 이상 다시 초기화되지 않는다... 더보기 React Hook 정리 - useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 Hook인 useMemo, useCallback 중 useMemo에 대해 정리해보려고 한다. 우선 useMemo를 사용하기에 앞서 아래 용어를 알아야한다. Memoization: 동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 처음 계산된 값을 메모리에 저장하여 이를 재사용하는 기법 함수형 컴포넌트를 사용하는 코드에서 컴포넌트가 렌더링된다는 의미는 해당 컴포넌트 함수가 호출된다는 의미이다. 즉, 호출될때마다 함수 내의 모든 내부 변수를 그때 그때 초기화 한다는 의미이다. 일례로 아래와 같은 코드가 있다고 가정하자. function Component() { const value = heavyTask(); return {value} } function heavyT.. 더보기 React Hook 정리 - useContext 사용배경 React의 Component Tree 간 props를 통해 값을 전달할 때 발생할 수 있는 복잡도를 줄이고자 제공된 기능 (Prop Drilling) Context를 통해 App 안에서 전역적으로 사용되는 데이터를 여러 컴퍼넌트끼리 공유할 수 있는 방법을 제공 다만, Context를 사용한 코드는 컴포넌트를 재사용하기에 좋지 않아 필요한 경우에만 사용한다. (공식문서: 단순히 Prop Drilling 을 피하기 위해서라면 Component Composition 사용을 제안하고 있다.) 예) 다크모드 테마의 경우 전역적으로 사용되는 상태값이나 굳이 모든 컴퍼넌트에서 props를 통해 받을 필요는 없는 것으로 가정 // ThemeContext.js import { createContext } fr.. 더보기 React Hook 정리 - useRef 함수형 컴퍼넌트에서 useRef를 사용하면 ref 오브젝트를 반환한다. const ref = useRef(value); // ref : { current : value } 반환된 ref는 컴퍼넌트 전 생애주기를 통해 유지가 된다. 👉🏻 계속 렌더링 되어도 unmount가 되지 않는 이상 계속 유지가 된다. 📌사용 목적 1. 값을 저장해 두는 저장공간으로 사용 : useState와 달리 렌더링을 원하지 않을 때 사용한다. 2. DOM 요소에 접근할 때 사용 DOM요소에 접근하는 방법 // 렌더링 후 input 박스로 자동으로 focus 되게 처리 import React, { useRef, useEffect } from 'react'; const App = () => { const inputRef = use.. 더보기 React Hook 정리 - useEffect useEffect를 이해하기 위해서는 우선 아래의 케이스를 알아야 한다. Mount : 화면에 첫 렌더링 Update : 재렌더링 Unmount : 화면에 사라질 때 useEffect는 위 3가지 상황에 특정 코드를 실행하고 싶을 때 사용된다. 기본적으로 인자를 콜백함수를 받는다. 따라서 우리가 원하는 작업은 콜백함수 내에 작성한다. 보통 아래 두 가지 케이스로 사용된다. useEffect(() => { // TODO implement }); 위 케이스는 아규먼트로 콜백함수만 받는 경우, useEffect(() => { // TODO implement }, [value]); 두번째 케이스는 아규먼트로 콜백함수와 배열을 받는 형태이다. (Feat. Dependency Array) 1번 케이스는 페이지가 렌.. 더보기 React Hook 정리 - useState import { useState } from 'react'; const [state, setState] = useState('초기값'); setState를 사용하여 state를 변경하면 화면은 재렌더링됨. 초기값은 무엇이든지 올 수 있음 (오브젝트 등도 가능) 예제) 배열을 상태로 했을때 배열 업데이트 const [color, setColors] = useState(['Red', 'Green']); const [input, setInput] = useState(''); // color를 추가하기 위해 input에 입력 const handleInputChange = (e) => { setInput(e.target.value); }; // 입력 후 추가를 했을 때 동작 const handleAdd = () .. 더보기 이전 1 다음
