react 2

React: useMemo, useCallback, 생명 주기, key 설정 이유?

안녕하세요! 이번 포스트에서는 리액트에서 자주 사용되는 useMemo, useCallback Hook과 리액트의 생명주기(lifecycle), 그리고 배열을 렌더링할 때 꼭 알아야 하는 key 설정에 대해 알아볼게요. 리액트 예습 차원에서 검색하고 공부한 내용이라서 많이 부족합니다😊 목차1. useMemo와 useCallback이란?2. React에서의 생명주기3. 배열을 렌더링할 때 key를 왜 설정해야하나?useMemo와 useCallback이란?리액트에서 useMemo와 useCallback은 성능 최적화를 위한 Hook입니다. 두 Hook 모두 불필요한 연산이나 함수 재생성을 방지하기 위해 사용됩니다. 말만 봐도 효율적일 것 같은데, 각각의 기능이 무엇인지 알아봅시다. useMemo: 어떤 계산..

위클리페이퍼 2024.09.01

React: 렌더링, Virtual DOM, Component

안녕하세요! 오늘은 리액트의 핵심 개념에 대해 알아보려고 해요. 리액트를 아직 배운 건 아니지만, 미리 예습하는 마음으로 중요한 주제들을 정리해보았습니다.  목차1. React 렌더링 하는 방식2. React의 Virtual DOM3. React의 컴포넌트(component) React 렌더링 하는 방식리액트는 사용자 인터페이스(User Interface: UI)를 효율적으로 업데이트하고 관리하기 위해 설계된 라이브러리라고 합니다. 전통적인 웹 개발 방식에서는 HTML 요소들이 변경될 때마다 전체적인 DOM(Document Object Model)을 업데이트해야 했는데, 이 과정에서 성능이 저하되는 문제로 인해 리액트는 리액트만의 새로운 렌더링 방식을 사용합니다!리액트의 렌더링 과정컴포넌트 기반 렌더링:..

위클리페이퍼 2024.08.25