Redux를 사용하는 이유 중앙집중적인 데이터 Store를 통해 애플리케이션을 쉽게 개발 관심사의 분리를 통한 코드의 복잡성 감소 Redux Dev Tools(상태에 대한 버전 관리) 예제) 컴포넌트 클릭 시, 컴포넌트들의 색을 전체 변경하는 코드 1) 리덕스가 존재하지 않는 코드 컴포넌트가 기하급수적으로 늘어난다면, 관리해야하는 포인트가 너무 많음(강한 종속 관계) 100개의 컴포넌트, 10000개의 코드 수정 필요(색 변경) 2) 리덕스 사용 Redux Store에서 State 관리(중앙집중적으로 데이터 관리) Action을 Store에 Dispatch를 통해 상태 변경 요청 Reducer에서 관련 컴포넌트 상태 변경 상태 변경에 따른 각각의 컴포넌트 리렌더링(Subscribe) => 관심사의 분리를..

Redux 정의 상태 관리 라이브러리(중앙 집중적 데이터 저장 방식) 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더운 효율적으로 관리 컴포넌트 서로 간의 상태를 공유할 때, 손쉽게 상태 값을 전달 미들웨어라는 기능을 통해 비동기 작업, 로깅등의 확장 작업들을 쉽게 할 수 있도록 도와줌 예제) 복잡한 컴포넌트 구조 E 컴포넌트의 doSomething 이라는 함수에 의해 something 이라는 상태를 E -> B -> Root 전달, Root 에서는 A -> C -> F 로 전달 props 가 필요한 곳으로 전달되게 하기 위하여, 실제로는 props 가 사용되지 않지만 전달을 위해 거쳐가야 하는 것은 리렌더링 할 때 비효율적 예제) 리덕스를 사용 상태와 변화 로직이 저장되어 있는 스토어를 통해..

SPA(Single Page Application) 한개의 페이지로 이루어진 애플리케이션 필요한 데이터를 서버사이드에서 HTML으로 전달하지 않고, 필요한 데이터만 서버로부터 JSON 형식으로 전달받아 동적으로 렌더링 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줌 전통적인 웹 페이지 기존에는 사용자가 다른 페이지를 이동할 떄 마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줌 사용자에게 보여지는 화면은 서버 측에서 준비 사전에 html 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용 요즘에는 웹에..

React 오직 View 만 신경쓰는 라이브러리 초기 렌더링과 리렌더링 과정을 통해 데이터가 변할 때마다 새롭게 랜더링하면서 성능을 아끼고 최적의 사용자 경험을 제공(Virtual DOM) ※ 라이브러리 다른 웹 프레임워크의 경우 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하는 반면, 리엑트는 뷰만 신경 쓰는 라이브러리이기 때문에 직접 필요한 기능은 구현해서 사용 이미 제공되는 라이브러리가 많음 초기 렌더링 Render 함수 사용 Render 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 가진 객체를 반환 Render 함수 실행 시 내부에 존재하는 컴포넌트들은 재귀적으로 렌더링 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보를 사..