react-hooks
-
리액트 Hooks) useCallbackReact 2022. 6. 17. 15:44
함수 컴포넌트는 함수다. 함수 컴포넌트는 상태변화시 다시 렌더링이 된다. 렌더링시, 함수 내부 변수는 초기화가 된다. 그리고 함수는 객체다. 초기화가 된다는건 새로운 객체가 다시 만들어지고, 메모리 주소도 새로 생성 된다. 대부분의 경우 이러한 방식은 문제없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. 예제 1) import { useEffect, useState } from "react"; function App() { const [number, setNumber] = useState(0); const someFunction = () => { console.log(`someFunc: number: ${number}`); }; u..
-
리액트 Hooks) useRefReact 2022. 6. 17. 14:08
useRef가 유용한 두 가지 상황 1) 저장공간 State가 변하게 되면 렌더링이 되고 컴포넌트 내부 변수들이 초기화가 된다. 하지만 Ref가 변하면 렌더링이 되지 않고 따라서 변수들의 값이 유지된다( 불필요한 렌더링을 막을 수 있음). 또한 State의 변화로 렌더링이 된다 하더라도 Ref의 값은 유지된다. 2) DOM 요소에 접근 ex) Input 을 클릭하지 않아도 focus() 를 주고 싶을 때, 로그인 화면이 주어졌을 때 클릭하지 않아도 자동으로 focus()가 가게끔 할 때 예시 1) 버튼을 누르면 카운트가 증가하고 렌더링이 될 때마다 콘솔을 출력해보자. import { useEffect, useState } from "react"; function App() { const [count, s..
-
리액트 Hooks) useMemoReact 2022. 6. 17. 11:39
다음 코드를 보자. function calculate() { return 10; } function Component() { const value = calculate(); return {value}; } 함수형 컴포넌트가 렌더링 된다는 말은 그 함수가 호출된다는 말이다. 함수가 호출될 때마다 내부의 모든 변수들이 초기화 된다. 위 코드의 calculate()는 컴포넌트가 렌더링이 될 때마다 호출될 것이고, 무의미한 계산을 하는 반복적인 일이기 때문에 상당히 비효율적이다. 이때 useMemo를 사용하여 Memoization을 해주면 이런 상황을 간편하게 해결할 수 있다. useMemo의 구조 const value = useMemo(() => { return calculate(); }, [item]); 첫..