본문 바로가기

📓Book3

[모던 리액트 Deep Dive] 03장 리액트 훅 깊게 살펴보기 리액트로 개발하면서 훅은 항상 사용하는데, 정확히 이 훅이 어떤 의미이고 왜 이렇게 사용하는지에 대해 잘 모르는 것 같아서 한번 모던 리액트 Deep Dive에 있는 내용을 정리해보겠습니다.훅(hook)이 뭐냐?클래스형 컴포넌트에서만 할 수 있었던 상태 관리와 라이프사이클(생명주기) 메서드를 함수형 컴포넌트에서도 사용할 수 있게 해주는 함수죠. 대표적인 훅에 대해 알아봅시다. 1.useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있도록 해주는 훅이다.import {useState} from 'react';const [state, setState] = useState(initialState); 리액트는 useState를 사용하지 않고 함수 내부에서 자체적으로 변수를 사용해 상태값.. 2025. 1. 18.

[모던 리액트 Deep Dive] 2.4 렌더링은 어떻게 일어나는가? 리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다.이 렌더링 과정은 시간과 리소스를 소비해 수행되는 과정으로, 이 비용은 사용자에게 청구되며 시간이 길어지고 복잡해질수록 유저의 사용자 경험을 저해하기 때문에 이러한 렌더링 과정을 최소한으로 줄여야 한다. 2.4.1 리액트의 렌더링이란?리액트에서의 렌더링이란 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다. 2.4.2 리액트의 렌더링이 일어나는 이유1.최초 렌더링 : 처음 진입하면 렌더링해야 할 결과물이 필요한다. 리액트는 브라우저에 이 정보를.. 2025. 1. 17.

[모던 리액트 Deep Dive] 05장 리액트와 상태 관리 라이브러리 5.2 리액트 훅으로 시작하는 상태 관리5.2.1 가장 기본적인 방법: useState와 useReduceruseState와 useReducer는 지역 상태를 관리할 수 있는 훅이다.하지만 이 지역 상태는 해당 컴포넌트 내에서만 유효하다는 한계가 있다. 그럼 여러 컴포넌트가 동시에 사용할 수 있도록 전역 상태를 만들어 컴포넌트가 사용하는 모든 훅이 동일한 값을 참조하게하면 된다.그리고 상태가 업데이트됐을 때 이를 컴포넌트에 반영시키기 위한 리렌더링이 필요하다. 위와 같은 조건을 만족하는 전역 상태 관리를 하기 위해 store를 정의해보겠다.store는 값이 변경될 때마다 변경됐음을 알리는 callback 함수를 실행해야 하고, 이 callback을 등록할 수 있는 subscribe 함수가 필요하다. 5... 2024. 7. 2.

이전 1 다음

티스토리툴바