[React JS] memo, useMemo 그리고 useCallback

이번에는 memo와 useMemo 그리고 useCallback에 대해서 공부하던 도중 성능 최적화를 위해서 정리가 필요하다고 판단해서 정리해본다.  참고로 log js 파일을 생성하여 컴포넌트의 레벨에 따라 렌더링이 되는지 확인을 해보았다. export function log(message, level = 0, type = 'component') { let styling = 'padding: 0.15rem; background: #04406b; color: #fcfabd'; if (type === 'other') { styling = 'padding: 0.15rem; background: #210957; color: #ede6b2'; } const indent = '- '.repeat(..

• format_list_bulleted FE/ReactJS
• · 2024. 5. 5.
• textsms

[React JS] useState 동작방식

react를 공부하면서 아주아주아주 흥미로운 사실을 알게되어 간결하게 정리한다. 우리가 상태관리를 위해 useState를 사용합니다. 만약 아래와 같은 소스가 있다고 가정해봅시다. import { useState } from 'react' import './App.css' function App() { const [count, setCount] = useState(0) function handleClick() { setCount(count + 1) // 이부분 setCount(count + 1) // 이부분 } return ( count is {count} ) } export default App 간단한 버튼만 구현한 것입니다. 신기하게도 두번의 setCount 를 호출하였는데 값은 1씩 증가합니다. 그..

• format_list_bulleted FE/ReactJS
• · 2024. 3. 31.
• textsms

[React JS] Virtual DOM이란 무엇인가??

이번에 React JS관련 공부를 진행하면서 기본적인 이론과 더불어 정리를 해 나가고자 한다. 먼저 Virtual DOM이다. Virtual DOM ?? 우리가 DOM은 많이 들어봤을 것이다. 예를 들어, 아래와 같은 HTML 코드가 있다고 가정해보자. 사슴에 관한 진실. 그렇다면 우리는 HEAD 태그 아래 TITLE태그가 존재하고 BODY 태그 안에 H1 태그가 존재한다. 이와 같이 트리형태로 구성되어있는것이 DOM구조 이다. 그런데 React 에서는 Virtual DOM을 사용한다. 쉽게 말하자면, 실제 DOM을 건드리고 조작하는 방식이 아닌 실제 DOM을 모방한 가상의 DOM을 구성하여 차이점을 골라내 변경된 부분만 Rerendering 시켜주는 방식으로 동작한다. Virtual DOM을 사용하는 ..

• format_list_bulleted FE/ReactJS
• · 2024. 3. 31.
• textsms