Ryu.log

React.memo() 사용팁 정리 Created: Apr 14, 2021 10:27 AM Tags: React, javascript 요약: React.memo() 사용 팁 React.memo() 사용 팁 정리 React에서는 UI성능 증가를 위해 **React.memo()** 를 지원한다. React.memo() **React**에서는 먼저 컴포넌트를 랜더링 한 뒤, 이전 랜더링 된 결과와 비교하여 랜더링 결과가 이전과 다르다면, DOM을 업데이트 한다. export function User({ name, data }) { return ( name: {name} data: {data} ); } export const MemoizedUser = React.memo(User); React.memo() 로 ..

Hooks 사용법 Hooks는 React에서 Component를 함수형으로 개발 하도록하기위해 새로 만들어 졌다. Hooks를 사용하면 함수형 컴포넌트를 사용하면서도 State제어가 가능하다. 또한 Class형 Component에 비해 획기적으로 코드량이 확연하게 줄어든다. React에서는 기존 Class방식의 Component가 아닌 Hooks를 권장한다. useState hooks에서 state를 다룰때 사용된다. import React, { useState } from 'react'; const App = () => { const [check, setCheck] = useState(0); const onClickEvent = () => setCheck(check + 1); return ( Hooks..