전체 글101 Custom Hooks Custom Hooks 커스텀 훅은 react에서 제공하는 훅이 아닌 개발자가 직접 만들어서 사용하는 훅을 말한다. 이를 사용했을 때 input과 fetch와 같이 반복적으로 사용되는 메서드를 하나로 묶어서 사용할 수 있게 해주며, 이에 따라 코드 재사용성을 높여준다. useInput 만들기 input 태그를 생성하고 활용하려면 보통 input을 관리하는 state와 값의 변경을 다루는 Onchange 함수, 그리고 input에 입력된 값을 바탕으로 특정 동작을 수행하는 Onclick 함수를 생성해야 한다. 만약 Input을 여러개 사용해야 할 경우 코드가 매우 길어질 수 있으며, 동일한 코드를 사용하는 것이기 때문에 custom 훅을 만들어서 사용하면 재사용성을 높이고 가독성을 높일 수 있다. useI.. 2023. 12. 7. useReducer를 통한 상태관리(reducer, dispatch, action) useReducer state 관리를 위한 hook으로 여러 하위 값을 가지는 state와 같이 복잡한 state를 다뤄야 할 때 useState 대신 사용할 수 있는 hook이다. useReducer를 사용하기 위해선 먼저 reducer와 dispatch, action에 대해 알아야 한다. 은행을 예로 들었을 때 은행의 역할은 예금자에 요구에 의해 입금 혹은 출금을 해주는 역할을 한다. useReducer에서 reducer가 이러한 역할을 한다. 그리고 예금자가 은행에 입금 또는 출금을 요구해야 은행은 그 동작을 수행하는데, useReducer에서는 이 역할을 dispatch라고 한다. 그리고 요구의 내용을 action이라고 하며, 이러한 과정을 통해 잔고가 변화하게 되는데, 이때 잔고를 state라고.. 2023. 12. 6. Context API의 기초적인 사용방법(useContext) Context API 애플리케이션 안에서 전역으로 사용되는 데이터를 공유하는 방법을 제공하는 API이며, Context는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능이다. 이를 사용하면 자식 컴포넌트에게 지속적으로 props를 넘겨주지 않아도 되기 때문에 props drilling을 방지할 수 있다. 사용 방법 먼저 context를 정의할 새로운 파일을 만들고 아래와 같이 작성해 주면 된다. defaultValue는 Provider로 value를 제공해주지 않을 경우 사용되는 고정값을 의미하며, 컴포넌트를 독립적으로 테스트할 때 유용한 값이다. //context/ThemeComtext.js import { createContext } from 'react' export const Them.. 2023. 12. 2. useCallback을 활용한 성능 최적화 useCallback 메모이제이션 기법으로 컴포넌트의 성능을 최적화하는 데 사용하는 Hook이다. useMemo는 값을 메모이제이션 해주는 Hook이라면, useCallback은 콜백함수 자체를 메모이제이션 해준다. useCallback의 구조는 useMemo와 똑같으며, 메모이제이션 해줄 콜백함수와 의존성 배열을 포함해야 한다. const calculate = useCallback(num => { return num + 1 }, [item]) 사용방법 먼저 아래와 같이 useCallback을 사용하지 않았을 경우 number의 값이 바꿀 때나, isDark의 값이 바뀔 때 모두 렌더링이 발생하기 때문에 useEffect가 실행이 된다. 이유는 someFunction은 콜백함수를 저장하는 메모리의 주소값.. 2023. 11. 29. 이전 1 2 3 4 5 6 7 ··· 26 다음 728x90
