728x90 반응형 react2 React 렌더링과 최적화 + React.memo로 재사용여부 판단하기 렌더링 브라우저에서 렌더링이란 DOM 요소를 계산하고 그려내는 것을 의미한다. 1. HTML과 CSS를 통해 DOM을 만든다. 2. 계산된 DOM은 CSSOM과 결합된다. 3. 위치를 계산한다. 4. 브라우저에 그려진다. 5. 브라우저에서 제공하는 DOM API를 JS를 통해 호출하고, 브라우저에 그려진 화면을 변화시킨다. Vanila JavaScript를 이용해서 DOM에 직접 접근하고 수정하고(명령형) 최적화하는 것은 애플리케이션 규모가 커질수록 관리하기 힘들다. 그래서 애플리케이션에서 보여주고 싶은 핵심 UI를 선언하기만 하면 실제로 DOM을 조작해서 UI를 그리고, 변화시키는 일은 React와 같은 라이브러리나 프레임워크가 대신해 주는 방법을 사용하게 된 것이다.(선언형) React에서 리렌더링 .. 2023. 5. 7. [React] 클릭한 <Button> 색상 변경하기 프로젝트를 진행하면서 버튼을 클릭하면 해당 버튼의 색상을 변경하고 싶었다. useState와 onClick 이벤트를 사용하면 아주 쉽게 원하는 동작을 구현할 수 있다. 나는 참고로 tailwind-css를 사용하고 있다. 작성된 코드를 보는게 이해하기 쉬워 밑에 코드를 참고하는 것이 좋다. import { useState } from 'react'; function Button({ name, className }) { const [clicked, setClicked] = useState(false); const onClick = () => setClicked(!clicked); return ( onClick()} > {name} ); } export default Button; useState를 사용하여.. 2023. 2. 22. 이전 1 다음 728x90 반응형
