지니 코딩일기

요약 - 컴포넌트를 React.memo()로 wrapping하면 렌더링될 때 결과를 메모이징(Memoizing)함 - 렌더링될 때 이전 렌더링과 props가 같다면 React는 메모이징(Memoizing)된 내용을 재사용함 - 같은 실행을 반복하지 않게 함으로써 성능 향상을 누릴 수 있음 - 이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 “방지”하기 위하여 사용하지 마세요. 버그를 만들 수 있음!! 예시 const MyComponent = React.memo(function MyComponent(props) { /* props를 사용하여 렌더링 */ }); 설명 - 고차 컴포넌트 (Higher Order Component) - 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, R..

useRef 왜 사용하나? - useState()나 useEffect() 처럼 자주 사용되지는 않음 - React 컴포넌트는 기본적으로 상태(state)가 변경될 때마다 다시 렌더링 됨 - 이때, 다시 render 되더라도 기존에 참조하고 있던 컴포넌트 함수 내의 값이 보존되어야 하는 경우! useRef 특징 - current 속성을 가진 ref객체를 반환함 -> current 속성이란? - 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 렌더링되지 않음 - React 컴포넌트가 다시 렌더링 될 때도 마찬가지로 current 속성의 값이 유실되지 않음 - 반환된 ref 객체는 컴포넌트의 전 생애주기를 통해 유지됨 - 이 객체의 current 속성을 통해 DOM 노드나 React 엘리먼트에 ..