[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 해줄 값을 .. [React] React Hook의 개념과 종류 - useState(), useEffect() Hooks Function Component와 Hook 컴포넌트의 종류로는 Function Component와 Class Component가 있다. Function Component state 사용 불가 Lifecycle에 따른 기능 구현 불가 Hooks Class Component 생성자에서 state를 정의 setState() 함수를 통해 state 업데이트 Lifecycle methods 제공 Hook을 사용하면, Function Component도 Class Component의 기능을 모두 동일하게 사용할 수 있다. Hook 의미 및 특징 Hook, 갈고리 ➰ 기존에 사용하던 기능에 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것. React Hook : 리액트의 state와 생명 주기 기능에.. 이전 1 다음
