[React] Hook의 규칙과 Custom Hook - 커스텀 훅 특징 및 사용법 Hook의 규칙 1. Hook은 무조건 최상위 레벨에서만 호출해야 한다. 반복문이나 조건문, 중첩된 함수들 안에서 Hook을 호출할 수 없다. Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다. ⏩ useState(), useEffect()를 호출해서 컴포넌트의 state를 올바르게 관리할 수 있도록 한다. 📌 예제1. 잘못된 Hook 사용법 import { useEffect } from 'react'; function MyComponent(props) { const [name, setName] = useState('yuns'); if(name !== '') { useEffect(()=> { ... }); } ... } ⏩ 렌더링할 때마다 Hook이 같은 순서로 호출되지 않고, 조.. [React] React Hook의 종류 - useMemo(), useCallback(), useRef() Hook의 종류 - 2 useMemo() Memoized value를 리턴하는 Hook Memoization 비용이 높은 함수의 호출 결과를 저장해 뒀다가, 같은 입력값으로 함수를 호출하면 저장해둔 호출 결과를 바로 반환한다. ➰ Memo를 해두었다가 나중에 다시 사용하는 것! 속도를 향상하고, 불필요한 중복 연산을 제거할 수 있다. Memoized Value : Memoization된 결과값 사용법 const memoizedValue = useMemo( () => { // 연산량이 높은 작업을 수행하여 결과를 반환 return computeExpensiveValue(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); 2개의 파라미터를 갖는다. memoization 해줄 값을 .. 이전 1 다음
