공부 기록

React.memo 어떠한 컴포넌트를 React.memo 처리를 해주면 그 컴포넌트가 렌더링될 때마다 Prop Check를 통해 props의 변화가 있는 경우에만 렌더링을 하도록 해준다. props의 변화가 없을 경우에는 이전에 이미 렌더링된 내용을 재사용하여 불필요한 컴포넌트 렌더링을 줄여준다. const Student = ({ name, age, address }) => { return ( {name} {age} {address} ); }; 다음과 같은 컴포넌트일 경우 name, age, address 중 변화가 있다면 렌더링하고 세 개의 props 전부 변화가 없다면 해당 컴포넌트를 렌더링하지 않고 재사용한다. React.memo에서 memo는 memoization을 뜻하기 때문에 [React] M..

useReducer React Hooks의 하나로서 useState와 같이 state를 생성하고 관리할 수 있는 hook이다. 여러 개의 하위 값을 포함하는 복잡한 state를 관리할 때 useState 대신에 useReducer를 쓰면 관리 및 유지보수 하기 좋다. useReducer는 Reducer, Dispatch, Action 이 세 가지로 이루어져 있다. Reducer는 Dispatch가 보낸 Action의 내용대로 state를 직접 수정하는 주체이고, Dispatch는 Reducer에게 state를 수정할 방식(Action)을 보내는 주체이고, Action은 Dispatch가 보낸 state를 수정할 방식을 담고 있는 메시지이다. 사용법 1. useReducer const [value, dis..

useRef의 변수 관리 저장공간으로써 사용하는 방법은 아래의 링크를 통해서 보면 된다. [React] useRef는 언제 왜 사용할까? useRef useRef는 함수형 컴포넌트 내에서 사용하며 React Hooks 중에 하나이다. 사용법 useRef를 사용하기 위해선 먼저 다음과 같이 import를 해주어야 useRef 사용이 가능하다. import { useRef } from 'react'; 이렇 mi-dairy.tistory.com 이번에는 useRef를 통해 DOM 요소에 직접 접근하는 방법을 알아볼 것이다. 사용법 const ref = useRef(value); 위의 코드를 통해 ref에는 객체가 반환되게 되는데 그때 반환된 객체를 다음과 같이 태그의 ref 속성으로 넣어주기만 하면 우리는 쉽..