Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

useEffect 2

Side Effect(부수효과)를 처리하기 위해 useEffect를 사용하는 경우와 useEffect를 꼭 사용하지 않아도 되는 상황

useEffect 훅의 목적 중 하나는 부수효과를 안전하게 처리하는 것입니다. 부수효과란 앱이 의도한 대로 동작하기 위해 실행되어야 하지만 현재의 컴포넌트 렌더링 과정에 직접적인 영향을 미치지는 않는 작업입니다. 이러한 작업들은 꼭 실행되어야하는 작업이지만 현 컴포넌트 렌더링 과정에 직접적이고 즉각적인 영향을 미치지 않는 작업들이죠. 즉각적인 변화를 주지 않고 뒤늦게 영향을 주기 때문에 무한 루프 같은 문제점이 발생할 수 있습니다. useEffect로 부수효과 안전하게 처리하기 HTTP 요청에서의 부수효과 일반적으로 이러한 부수 효과는 외부 서버에서 데이터를 불러오는 작업 등 비동기 함수를 실행하는 상황에서 쉽게 볼 수 있습니다. 다음 코드를 보시죠. import { useState, useEffect ..

리액트가 리렌더링되는 시점과 useEffect로 실제 시점 살펴보기

상태와 리렌더링리액트의 컴포넌트는 상태가 변하면 해당 컴포넌트를 재평가(함수형 컴포넌트라면 함수를 재실행, 클래스형 컴포넌트라면 다시 인스턴스화)하여 새로운 내용이 반영하여 새로 UI를 그립니다. 이러한 행위를 리렌더링(re-rendering)이라고 합니다. 결국 리액트는 최초 렌더링 - 상태의 변화 - 리렌더링(렌더링)의 단계를 거치며 새로운 컨텐츠를 화면에 표시하는 것이죠. 하지만 이렇게만 생각하면 조금 헷갈릴 수 있습니다. 혼란을 줄이기 위해 조금 더 상세한 단계를 알아봅시다.먼저 리액트의 컴포넌트가 최초로 렌더링됩니다. 그리고 상태변화 요청이 오기 전까지는 계속 대기하죠. 그러다가 사용자가 버튼을 누르는 등의 행동을 통해 상태를 변화(set함수를 호출하는 로직을 실행)시키면 리액트는 해당 요청을 ..