⚙️Frontend/REACT9 [React] useMemo (ft. 재연산 최적화) 💡최적화 코테를 준비하면서도, 애플리케이션 개발을 하면서도 항상 신경써야한다고 누누히 들은 코드 최적화.. ! 두둥.. 리액트 애플리케이션을 개발할 때 역시 마찬가지이다. 리액트에서는 '렌더링과 연산'이 성능에 큰 영향을 미친다.특히, 상태( state) 가 변경될 때마다 불필요한 연산이나 렌더링이 반복되면 전체 성능이 저하될 수 있다. 리액트 최적화를 위해 지양해야할 요소들은 아래와 같다. 1. 불필요한 렌더링2. 컴포넌트 내부의 불필요한 연산3. 컴포넌트 내부의 불필요한 함수 재생성 이중 useMemo 훅은 React의 불필요한 연산을 막아 최적화한다. 💡useMemo : 특정 연산의 결과를 메모이제이션(memoization) 하여 불필요한 연산(재연산)을 방지하는.. 2025. 5. 28. [React] React.memo와 useCallback (ft. 리렌더링 최적화) 목차1. React.memo 메서드1-1. 커스텀 비교함수2. useCallback 💡1. React.memo 메서드저번에 useMemo 훅으로 불필요한 연산을 막았다면,React.memo는 불필요한 리렌더링을 막아주는 내장함수이다. : 함수형 컴포넌트를 메모이제이션(memoization) 하여, props가 변경되지 않으면 컴포넌트를 리렌더링하지 않는 기능을 수행한다. 기본형태는 아래와 같음.import { memo } from 'react';const MyComponent = (props) => { // ...};export default memo(MyComponent); props가 얕은 비교(shallow comparison)로 동일한 경우 해당 컴포넌트는 리렌더링되지 않는다. .. 2025. 5. 27. [React] useReducer React에서 '상태관리'에 사용되는 hook에는 useState와 useReducer가 있다.useState는 간단한 상태관리를 위해 사용되지만,복잡한 로직이 있는 경우에는 useReducer를 사용하는 것이 더 구조적이고 관리하기 쉽다. useReducer의 개념과 적용한 예시 코드를 정리해보자 ! 💡useReducer 란?useReducer 는 상태(state)의 변경 로직을 컴포넌트 밖으로 분리해줌으로써 보다 명확하게 관리하는 Hook이다. → 컴포넌트 외부에 상태 관리 코드를 분리ex.function reducer(){ //...}function App(){ const [todos, dispatch] = useReducer(reducer); //...} 기본적인 사용 형태co.. 2025. 5. 26. [React] useEffect (라이프사이클, Dependency array) 💡useEffect란?- React에서 컴포넌트의 라이프사이클을 다루기 위한 대표적인 Hook이다.- 생명 주기 별 특정 로직을 수행할 수 있도록 해준다.- 전통적인 클래스형 컴포넌트에서 사용하던 componentDidMount, componentDidUpdate, componentWillUnmount를 함수형 컴포넌트에서도 사용할 수 있게 해주는 Hook임 = 주기별 사이드 이펙트(side effect)를 제어한다. * 리액트 라이프사이클 ( life-cycle ): Mount(탄생)- Update(변화)- Unmount(죽음) 으로 구성 아래의 예시 코드를 통해 useEffect를 정리해보자.// App.jsximport './App.css'import Viewer from "./com.. 2025. 5. 22. [React] Props 전달 시 {} 사용하는 이유 / map() 함수 TodoList 앱 개발 중 간략하게 정리하면 좋을 내용이 생겨 정리하기:) 목차1. Props에 {} 전달하는이유2. map() 함수 1. Props에 {} 전달 하는 이유 일단 Props 란 리액트에서 부모 컴포넌트로부터 전달받는 데이터이다. 부모 컴포넌트로부터 props 를 전달받을 때 두 가지 방식이 있다. 1. Props 전체를 받음 const List = (props) => { console.log(props.todos); // 접근하려면 props.todos} 구조분해할당을 하지 않고 전달 props를 전달 받으면, 객체 형태(object)로 전달된다. { todos : [...] } 형태로 전달 되는 것이다.객체(object)는 key- value 쌍으로 구성되어 .. 2025. 5. 19. [React] React Hook과 Custom Hook 목차1. React Hook2. custom Hook 1. React Hook💡Hook이란? Hook은 React의 함수 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있도록 해주는 함수.기존에는 클래스형 컴포넌트에서만 가능했던 기능들을 함수형에서도 사용할 수 있도록 만들어준 리액트의 핵심 기능이다. Hook은 React 16.8에 새로 추가된 기능이며,Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다고 한다. ⚙️ 대표적인 Hook 종류useState: 컴포넌트의 상태값(state)을 저장하고 변경useEffect: 컴포넌트의 생명주기 관리 (마운트, 업데이트, 언마운트 등) useRef, useContext, useReducer, us.. 2025. 5. 14. [React] useState와 useRef 목차1. useState와 set함수2. 간단한 회원가입 폼으로 흐름 살펴보기3. useRef React를 처음 배우면서 가장 먼저 접하는 Hook이 바로 useState이다. useState는 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 핵심적인 기능이다. 이번 글에서는 간단한 회원가입 폼 예제를 통해 useState와 함께 사용하는 set 함수가 어떻게 작동하는지를 자세히 설명해보고자 한다. 1. useState와 set함수 ✏️useState- 컴포넌트에 state 변수를 추가할 수 있는 React Hook.- 상태값을 만들고, 이를 제어할 수 있는 함수를 함께 제공한다. 💡사용법: 컴포넌트에 state 추가하기 컴포넌트의 최상위 레벨에서 useState를 호.. 2025. 5. 10. [React] JSX 란? (특징, CSS적용, className) 목차1. JSX 란?2. JSX 특징 및 주의사항3. JSX의 CSS 적용4. JSX 속성 사용방식 1. JSX 란? JSX는 JavaScript에 XML/HTML 형태의 마크업을 작성할 수 있게 해주는 JavaScript 확장 문법 Javascript에 XML 형식의 문법을 결합한 형태React에서는 렌더링 로직과 UI 로직이 연결되어 있다고 보기 때문에, 둘을 함께 구성하는 컴포넌트 단위로 관심사를 분리함. 2. JSX 특징 및 주의사항 💡 JSX의 특징 JS 표현식 포함 가능중괄호 {} 안에 JavaScript 표현식 사용 가능예: Hello, {name}JSX도 표현식이다!JSX는 JavaScript 코드처럼 변수에 할당하거나, 인자로 전달하거나, 함수에서 반환 가능속성 정의문.. 2025. 5. 8. [React] 리액트와 가상돔(virtualDOM) / 터미널 초기 설정 목차1. 리액트(React)2. 리액트 사용이유와 VitrualDOM(가상돔)3. terminal에서 초기 설정하기 1. 리액트(React) 💡자바스크립트 라이브러리리액트란 자바스트립트 UI 라이브러리이다. 💡 SPA(Single Page Application) SPA는 수많은 웹 페이지를 로딩할 때 최신 업데이트를 신속하게 반영하며, 페이지 로딩 속도를 향상시키고 트래픽을 줄인다.따라서 페이지가 부드럽게 전환되도록 하고, 업데이트가 될 때까지 기다리는 시간을 단축시킨다. ft. MetaMeta가 만든 오픈 소스 기반 라이브러리.든든한 지원군인 Meta덕에 웹 개발 시장에서 쉽게 무너질(?) 일은 없다는 것,! https://github.com/facebook/react GitHub -.. 2025. 3. 23. 이전 1 다음
