반응형

React 2

이벤트 핸들러 네이밍 on vs handle

이번 글에서는 이벤트 핸들러 이름을 지을 때 어떤 규칙이 있는지 정리해보았다. 어떤 경우에 handle* 을 쓰고 on* 을 쓰는지 알아보자. 리액트 이벤트 핸들러 네이밍 Prop Names prop 이름을 정할 때 보통 onClick과 같이 on* 접두사를 사용한다. 리액트 빌트인 이벤트 핸들러 규칙과 같다. Function Names function name은 handleClick과 같이 handle* 로 사용한다. 이 두 가지를 다음과 같이 사용할 수 있다. on 접두사가 붙은 경우, 이 prop에 실제 이벤트가 연결되어 있다는 걸 뜻하고, handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미한다. click 동사는 클릭했을 때 어떤 일이 일어나는지에 따라 달..

React 2022.03.12

React.memo() ?

리액트는 먼저 컴포넌트를 렌더링한 뒤, 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다. 리액트 memo는 고차 컴포넌트다. 컴포넌트가 React.memo() 로 래핑될 때, 리액트는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, 리액트는 메모이징된 내용을 재사용한다. export React.memo(function MyComponent({name, age}){ return ( {name}:{age} ) }) React.Memo(MyComponent)는 새로 메모이징된 컴포넌트를 반환한다. props인 name이나, age가 변경되지 않는다면, 다음 렌더링 때 메모이징된 내용..

React 2021.07.06