React 란?

React 란?

• 리액트는 자바스크립트와 (필요에 따라) XML을 이용해 조합형 사용자 인터페이스를 구축하는 엔진입니다.
• 간략히 말하자면 뷰에 특화된 라이브러리

 

React 동작

 

예) JSX → Javascript 변환

// JSX 코드 작성
return (
	Hello World
)

// 아래와 같이 javascript 로 변환됩니다.
return React.createElement("h1", null, "Hello World");

React Event 흐름도

• 부모 컴포넌트에서 자식으로 속성을 통한 단방향 데이터 흐름
• 자식이 부모컴포넌트로 데이터를 전달해야 할 경우는 자식이 이용할 콜백 함수를 속성을 통해 전달하여 사용합니다.

 

React 장점

• 편리한 반응형 렌더링
• 순수 자바스크립트를 이용한 컴포넌트 기반 개발
• 문서 모델의 유연한 추상화

 

Redux

• Flux 아키텍처를 이용한 라이브러리
• Flux 아키텍처란 무엇인가? 

• Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐입니다. 
• 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할을 합니다.

Flux 패턴동작

 

 

Redux-saga

 

• redux-saga란?

• redux-saga는 리액트/리덕스 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을, 더 쉽고 좋게 만드는 것을 목적으로하는 라이브러리입니다.

• 배경지식

• 이 라이브러리는 비동기 흐름을 쉽게 읽고, 쓰고, 테스트 할 수 있게 도와주는 ES6의 피쳐인 Generator를 사용합니다. 
• 비동기 콜백 지옥의 문제점

promise.then(function(){
	promise.then(function(){
		promise.then(function(){
		....
		});
	});

})

promise.all(function([test1, test2]).then(funciton(){
	...
});
          };
        })
      });
    });
  });
});

 

• redux-saga 흐름도

 

 

• 비동기 처리시 이슈

1. 특정 Action을 기다리다 다른 Action을 dispatch한다.
2. 통신처리를 완료를 기다리고, 다른 통신처리를 시작한다.
3. 초기화시 데이터를 읽어들이고 싶다.
4. 빈번히 발생하는 Action을 모아서 dispatch하고 싶다.
5. 다른 프레임워크, 라이브러리와 잘 어울리게 하고 싶다.

• 무엇이 좋아지나?

1. Mock 코드를 많이 쓰지 않아도 된다.
2. 작은 코드로 더 분할할 수 있다.
3. 재이용이 가능해진다.

 

표현(Presentational) 컴포넌트 vs 컨테이너(Container) 컴포넌트

• 표현(Presentational) 컴포넌트
• 프레젠테이션 컴포넌트는 일반적으로 알고 있는 UI 컴포넌트라 생각하면 된다.
• 모두 무상태 컴포넌트(Stateless Component)이다.
• 컨테이너(Container) 컴포넌트
• 컴포넌트는 여러 개의 프레젠테이션 컴포넌트로 구성돼 있으며, 데이터나 공통으로 관리해야 하는 객체, 컴포넌트 간의 인터랙션 등을 관리하는 컴포넌트다.
• 컴포넌트인 프레젠테이션 컴포넌트를 컨테이너 컴포넌트에서 관리한다고 생각하면 간단하다.