반응형 웹개발23 [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. 쿠키, 세션, JWT에 대해 araboza 웹 서핑을 하다 보면 '로그인 유지', '장바구니', '최근 본 상품' 같은 기능들을 자주 마주치는데요. 여러분이 로그인하지 않아도 내가 뭘 봤는지 기억하고, 심지어는 내 취향에 맞는 광고까지 띄워주잖아요?신기하게도 이런 기능들 뒤에는 쿠키(Cookie), 세션(Session), 그리고 JWT(JSON Web Token)라는 세 명의 핵심 키워드가 숨어 있답니다.이 친구들이 없으면 웹 서비스는 마치 기억상실증에 걸린 것처럼 매번 "너 누구니?" 하고 물어봐야 할 거예요. 자, 그럼 웹 개발에서 사용자 인증과 상태 관리를 책임지는 이 세 친구들을 지금부터 파헤쳐 볼까욧!!!!!1. 🍪 쿠키 (Cookie): 브라우저 속 비밀 쪽지!쿠키는 말 그대로 브라우저에 저장되는 아주 작은 '쪽지' 같은 데이터로 이.. 2025. 6. 24. [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. 이전 1 2 3 4 다음 728x90 반응형
