반응형 웹개발/ReactJS12 [React] Redux 라이브러리에 대해 알아봅시다 React 애플리케이션의 규모가 커질수록 데이터의 흐름과 상태 관리는 더욱 중요한데요.이러한 문제에 대한 해답으로 Facebook에서 제시한 Flux 아키텍쳐는 단방향 데이터 흐름을 통해 상태 예측 가능성을 높였고, 이를 기반으로 탄생한 Redux는 React 생태계에서 가장 널리 사용되는 상태 관리 라이브러리로 자리매김했는데요.오늘은 Flux 아키텍쳐와 Flux 아키텍처 기반의 Redux 라이브러리에 대해 알아보도록 하겠씁니다.1. Flux 아키텍쳐flux 아키텍쳐는 웹 애플리케이션을 만들 때 사용하는 설계 패턴으로, 데이터가 한 방향으로만 흐르도록 관리해 애플리케이션 구조를 단순화하는 아키텍쳐인데요. 구성 요소 먼저 살펴보시죠.1.1 Flux 아키텍쳐 구성 요소flux 아키텍쳐의 핵심 구성 요소는 V.. 2025. 6. 29. [React] React의 전역 상태 관리 React로 애플리케이션을 개발하다 보면 컴포넌트 간에 데이터를 공유해야 하는 상황에 자주 직면하게 됩니다. 간단한 애플리케이션에서는 props를 통해 데이터를 전달하는 것으로 충분하지만, 애플리케이션의 규모가 커지고 컴포넌트 트리가 깊어질수록 props drilling (상위 컴포넌트에서 하위 컴포넌트로 여러 단계를 거쳐 props를 전달하는 현상) 문제가 발생하여 코드를 복잡하게 만들고 유지보수를 어렵게 만듭니다. 이러한 문제를 해결하고 애플리케이션의 모든 컴포넌트에서 접근하고 업데이트할 수 있는 데이터를 효율적으로 관리하기 위해 전역 상태 관리(Global State Management)가 필요한데요. 오늘은 전역 상태 관리에 대해서 알아보도록 하겠습니다.1. 전역 상태 관리란?리액트는 useSta.. 2025. 6. 29. [React] React Compiler 당장 씁시다 성능 최적화에 대한 고민을 해본 개발자라면 React.memo, useMemo, useCallback 같은 API들과 씨름했던 경험이 있을 텐데요. 오늘은 이 수동적인 최적화 작업을 한 번의 설치 딸깍으로 해결해줄 React Compiler에 대해서 알아봅시다.1. React Compiler란?React Compiler는 React 애플리케이션의 성능을 자동으로 최적화해주는 빌드 타임 도구인데요.useMemo나 useCallback을 사용하여 불필요한 계산을 건너뛰거나, React.memo를 사용하여 컴포넌트의 불필요한 리렌더링을 막아왔던 작업을 자동으로 해주는 컴파일러라고 생각하시면 됩니다.참고를 위해, 메모이제이션으로 성능 최적화하는 방법에 대해 다룬 글도 첨부해봅니다.https://musubi-ir.. 2025. 6. 20. [React] useEffect hook에 대해 araboza 오늘은 React에서 정말정말 자주 쓰이는 useEffect hook에 대해서 알아보겠습니다.useEffect hook은 클래스 컴포넌트에서 componentDidMount, componentDidUpdate, componentWillUnmount로 컴포넌트의 생명주기를 관리하던 것을 함수형 컴포넌트에서 수행할 수 있게 하고,특정 상태나 속성(props)의 변화에 따라 부수 효과(side effects)를 관리하는 훅인데요.차근차근 살펴보겠습니다.0. useEffect는 왜 필요할까?리액트 컴포넌트는 화면에 보여주고 싶은 것을 그리는 역할을 합니다. 그런데 때로는 화면을 그리는 것 외에 다른 작업들이 필요해요.예를 들어, 데이터 가져오기 (API 호출): 웹사이트에 접속하면 서버에서 최신 게시글 목록을 .. 2025. 6. 20. [React] 메모이제이션으로 성능 최적화하기(useMemo, React.memo, useCallback 완전 비교) 오늘은 react 개발 시 메모이제이션을 이용해서 성능을 최적화하는 것에 대한 내용을 좀 다뤄보고자 합니다.0. 그전에, 메모이제이션이 뭐임?메모이제이션은 컴퓨터 프로그래밍에서 사용되는 최적화 기법 중 하나입니다. 핵심 아이디어는 간단한데요."한 번 계산했던 결과를 메모리(캐시)에 저장해 두었다가, 다음에 동일한 입력이 들어오면 다시 계산하지 않고 저장된 결과를 즉시 반환하는 것" 입니다.이는 특히 계산 비용이 비싼 함수나 불필요하게 자주 실행되는 로직에서 빛을 발합니다. 동일한 입력에 대해 항상 동일한 출력을 보장하는 순수 함수(Pure Function)에 특히 효과적이죠.React에서는 컴포넌트의 렌더링 과정에서 발생하는 불필요한 재연산을 줄이는 데 이 메모이제이션 기법을 적극적으로 활용합니다이제 이.. 2025. 6. 19. [React] useRef hook에 대해 araboza React 개발자라면 한 번쯤은 useState와 useEffect를 써봤을 텐데요. 이 훅들과 함께 React의 강력한 훅 중 하나인 useRef는 얼핏 보기엔 간단해 보이지만, 실제로는 컴포넌트의 특정 상황을 관리하는 데 매우 유용하게 쓰입니다.오늘은 크게 두 가지 메인 사용 방식을 바탕으로 useRef hook의 대해서 알아보도록 하겠습니다.1. 렌더링과 무관하게 값을 유지할 때우선, useRef hook은 렌더링과 무관하게 값을 유지할 때 사용됩니다.즉, "값은 변경하지만, 리렌더링을 유발하고 싶지 않을때 쓴다"고 이해하시면 편한데요. 저희가 익숙하게 쓰는 useState로 선언된 변수는 값이 변경되면 컴포넌트가 리렌더링됩니다. 하지만 때로는 리렌더링을 유발하지 않으면서도 컴포넌트 생애주기 동.. 2025. 6. 19. 이전 1 2 다음 728x90 반응형
