용성월드

리액트에서 setState를 사용하여 상태를 업데이트할 경우, 업데이트 된 상태는 즉시 반영되지 않는다. 왜냐하면 setState는 비동기적으로 작동하기 때문에! 즉, 리렌더링이 된 후에야 비로소 업데이트된 state가 반영된다. ( state 변경 - 리렌더링 - state 반영 ) setState / useState 는 비동기로 동작한다. 배치로 동작한다. 클로저를 사용해 상태를 기억한다.

https://github.com/gildydtjd/redux-study GitHub - gildydtjd/redux-study: redux / redux-saga / redux-thunk redux / redux-saga / redux-thunk. Contribute to gildydtjd/redux-study development by creating an account on GitHub. github.com 1. saga 만들기 import { delay, put, takeLatest, takeEvery } from 'redux-saga/effects'; import { decrease, increase } from '../action/action'; import { DECREASE_ASYNC, I..

Next 사용하는 이유 가장 큰 이유는 리액트 프로젝트에서 SSR(Server Side Rendering)을 하기 위함이라고 할 수 있다. 검색 엔진 최적화(SEO)를 하기 위해서 SSR이 중요한 역할을 하기 때문이다. 초기 로딩 속도가 빠른 SSR, 페이지 전환이 빠른 CSR SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 굉장히 빠르고 검색 엔진 최적화(SEO)에 유리하다. CSR은 서버가 아닌 클라이언트 측에서 서비스에 필요한 자원(Resource)을 먼저 다운로드 후에 브라우저에 렌더링 하는 방식이다. SSR보다 초기 로딩 속도는 뒤쳐질 수 있지만, 첫 페이지를 로딩하면서 모든 파일을 다운로드하기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용한다. N..

yarn add redux; yarn add react-redux; 한 파일에 이 3가지를 넣는다. 액션 타입 액션 생성 함수 리듀서 두개를 합칠 index.js 를 만든다. combineReducers 안에 만든 counter, todos 를 넣는다. createStore안에 만든 rootReducer 를 넣어 스토어 객체를 만들고, APP을 Provider로 감싸고 그안에 store 객체를 넣으면 된다. 이 후 사용할때 Counter라는 파라메터를 받을 수 있는 컴포넌트를 만들고, 그걸 안에 갖고있는 틀의 Counter 컨테이너 컴포넌트를 만든 뒤 (useSelector, useDispatch) useSelector 를 통해 state를 가져오고, 안에 객체 값을 정한다. const {number, ..

🔥 URL parameters 🔥 Query parameters split으로 쪼개서 parameter로 들어오는 숫자값을 queryId에 저장한다.

yarn add redux react-redux 모듈이라는 폴더를 만들고, counter라는 리덕스 모듈을 만들어준다. 1. 액션타입 만들기. 2. 액션생성함수 만들기. 3. 초기상태 선언 (initialState) 4. 리듀스 작성 index.js 파일을 만든다. 1. combineReducers 를 통해서 rootReducer를 만든다. 프로젝트에 리덕스를 적용 1. index.js 연다. 2. Store / Provider / rootReducer 를 불러온다. 3. Provider로 감싸고 그안에다가 store 객체를 넣는다. 카운터 컴포넌트를 만든다. CounterContainer를 만든다. 1. 위에 Counter 컴포넌트를 랜더링한다. 2. useSelector 를 통해 state를 불러온다..

Mobx의 장점 객체지향적 보다 객체지향적입니다 ES6에서 추가된 Class를 이름뿐인 Class가 아니라 객체지향적으로 사용하고 개발하는 것을 권장하고 있습니다. 도메인모델로 분리됨으로 써 집중된 비즈니스 로직은 적절히 분산되고 도메인간의 상호작용은 message를 주고 받는 형태로 구현 할 수 있습니다. 서버개발자들에게 친숙한 아키텍쳐 Java Spring Framework와 유사한 아키텍쳐구조를 지향하고 있어 서버개발자들에게 보다 친숙하고 낮은 러닝커브를 제공, 장점을 그대로 적용할 수 있습니다. (흥분되는 부분 이기도 합니다) Decorator 데코레이터(java 애노테이션과 유사하다고 보면 된다)를 제공하기 때문에 Redux를 사용할 때 React Component와 state를 연결 하기위한 ..

앞서 언급한 대로 Mobx는 Redux와 비슷한 종류의 State관리 라이브러리입니다. 위 언급한 Redux와는 다르게 너무나도 간결하고 깔끔한 구조를 가지고 있습니다. Mobx의 기본개념 및 특징 Mobx의 State(데이터)의 흐름과 핵심 개념을 간단하게 표현 해보았습니다. 사실 더 자세한 개념은 공식문서에 있지만 이해하는 데 방해가되는 개념은 제외하고 제가 이해한 부분을 간략하게 그려보았습니다. 배달 리스트를 가져오기 위해서 DeliveryStore(Spring의 서비스의 역할과 거의 비슷하다)의 findAllDeliveries를 호출하여 서버로 부터 가져온 데이터를 선언해둔 deliveries state에 할당 해주면 DeliveryComponent에서 deliveries 를 Rendering 하..

React Javascript Web Front-End Rendering 라이브러리 중 하나 보통 Single Page Application Framework가 대부분의 기능을 포함 하고 있는 반면에 React는 대부분의 기능을 포함하고 있는. Framework가 아니라 View를 Rendering 하는 것이 주 기능이며 나머지 기타 기능들(router, ajax등등)은 서드파티 라이브러리를 추가적으로 사용해야 한다. Component React에서 데이터를 화면에 렌더링하는 가장 기본이 되는 단위 라고 할 수 있겠습니다. React.Component를 상속하는 클래스형태의 Component와 함수형태의 Component 두가지 형태를 가지고 있으며 목적에 따라 구분해서 사용합니다. React는 작은 단..