React + Typescript (0)

(강의 링크)[https://www.youtube.com/watch?v=PFBRhxjIBUM&list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0]
Webpack2
Babel : ES6 + JSX 로딩
Ts : Babel loader 대신 타입스크립트에서 쓰는 로더
Es lint : 자바스크립트 컨벤션 체크
Ts lint : 타입스크립트 컨벤션 체크
JSX : 태그 기반의 컴포넌트를 그리는 문법

 

컴포넌트

1. React 컴포넌트
   React.Component<Props, State>
   Render를 다시 하게 해주는 데이터들
   Props

   • 외부에서 주입해주는 데이터
   • 컴포넌트 내부에서 자신의 props 변경 할 수 없다.
   • 컴포넌트 외부에서 주입하는 props가 변경되면 render가 다시 호출된다.
     State
   • 컴포넌트 안의 데이터
   • 클래스의 프로퍼티와는 다르다.
   • state 가 변경되면 render가 다시 호출 된다.
   • 즉 값이 변경됬을 때 렌더링을 다시 해주고 싶으면 사용한다.
   • state는 생성자 할당 또는 프로퍼티 할당으로 반드시 초기화 해줘야한다.
   • State 의 변경은 반드시 setState 으로 변경되야한다.
   • State 에 초기 할당은 생성자에서만 가능하다.

2. Pure 컴포넌트
   React.PureComponent<Props, State>
   라이프 사이클 중 shouldComponetUpate 의 렌더링을 할지 말지 정하는 로직이 다른 컴포넌트. React 컴포넌트는 Props, state 를 가르키는 주소값이 변경되면 렌더링하지만 Pure 컴포넌트는 내부 값이 변경될 때만 렌더링한다. 이때 이를 shallow compare 라고 한다.

3. Stateless 컴포넌트
   그냥 함수

   const MySLC : React.SFC = (props) => { 
   return {}; 
   } 

 

라이프 사이클

1. 컴포넌트 생성에서 올릴때까지
   1. constructor
   2. componentWillMount
   3. render
   4. componentDidMount
2. Props, State 가 변경될 때
   1. componentWillRecieveProps - props 가 변경될 때 state 도 같이 변경될 경우 render가 두번 될 수 있다. 이런 상황을 방지하기 위한 메소드
   2. shouldCompoentUpdate - return 을 true/false 로 하냐에 따라 render 를 할지 말지 결정. props 나 state 가 변경되면 무조건 새로운 props, state 가 온다.
   3. componentWillUpdate - 여기서 setState 하면 무한루프가 생긴다.
   4. render
   5. componentDidUpdate

• defaultProps : props 안의 변수중 하나가 ?으로 끝나는 이름일 경우. 있을 때도 있고 없을 때도 있다의 의미다.
• 일반적으로 컴포넌트의 동작(setInterval, API 호출 ...)은 생성자에 넣지 않고 componentDidMount 에 넣는다.
• 생성자에 주로 멤버 함수를 바인드하는 내용이 들어간다. 바인드 하는 이유는 멤버함수가 this 를 사용하므로 scope 을 해당 클래스로 명시하기 위해서다.

   

  this.myMethod = this.myMethod.bind(this); 

• Props 와 state를 인터페이스로 분리하자.
• 컴포넌트의 기능을 재사용하고 싶으면 상속하지 말고 모듈로 분리해서 사용하는게 좋다. (컴포지션) =. Props 로 컴포넌트를 내려주는 것은 매우 자연스러운 일이다.
• 성능 상으로 Stateless > PureCompoent > ReactComponent 이다.
• PureComponet를 쓸 땐 copy 를 하거나 Immutable.js 를 써라.

 

Redux MobX가 필요한 이유

1. 현재 컴포넌트에서 상위 컴포넌트 값을 변경하려면 상위 컴포넌트에서 값을 변경할 수 있는 함수를 만들고 이 함수를 하위 컴포넌트에 내려줘야한다.
2. 현재 컴포넌트에서 하위 컴포넌트 값을 변경하려면 변경된 값을 Props로 하위 컴포넌트까지 전달해야한다. 그런데 이 과정이 문제인 것이 하위에 props를 내리는 과정으로 인해 현재 컴포넌트~하위 컴포넌트까지 모든 컴포넌트를 다시 렌더링해야한다. (Reference 를 하위 컴포넌트에 내려서 피할 수 있는 방법이 존재하긴한다.)

 

ReactRouter

React router : 일반 정적 웹페이지는 다른 주소는 다른 페이지를 가짐. 하지만 리액트의 경우 데이터 페치를 클라이언트에서 하고 렌더링도 클라이언트에서 한다. (SPA이기 때문) 리액트 라우트는 유저가 어떤 주소로 접근하면 URL을 해석하여 이에 알맞는 리액트 컴포넌트를 렌더링 해서 보여주는 역할

 

BrowseRouter
주요 컴포넌트

• Router
• Route : 렌더링 방식이 여러개 존재한다.
  • Render
  • Component
  • Children
• Link : 앵커 테그와 비슷하지만 페이지 리로딩이 되는 것은 아니다.
• Switch : Route 태그를 감싸서 사용하며 하위 라우트 중, URL path 가 일치하며 가장 위에 있는 하나의 라우트만 처리한다.
• Redirect : 마운트 되면 지정된 경로로 이동. history 를 푸쉬하는게 아닌 replaace 한다.

RouteComponentProps
props.match 객체

• path 에 정의 한 것과 매치된 정보
  • 일치하는가?
  • Path variable 이 존재하는가?
    props.location 객체
• 브라우저의 window.location 객체 와 유사, URL 을 다루기 쉽게 쪼개서 저장
  • pathName
  • Search : 쿼리 스트링, 알아서 파싱해야한다.
    props.history 객체
• 브라우저의 window.history 객체와 비슷하다.
• SPA 동작에 맞게 URL 이동정보를 기록한다.

 

Redux

Redux
하나의 큰 단일 스토어를 둔다.
현재 컴포넌트가 다른 컴포넌트에 변경을 주고싶을 액션을 만들어 store에 보내면 변경이 필요한 컴포넌트들이 알아서 수정하는 방식
단일 스토어 만들기 (import redux)

1. 액션 생성을 정의 object 를 반환하는 함수
2. 리듀서를 생성 pureFunction
3. 리듀서 합치기 combineReducer
4. 리듀서를 스토어에 넣기 createStore(리듀서)
   단일 스토어 사용하기
5. import react-redux
6. Connect

액션 : 객체

• type : string
• params 액션에 같이 보낼 데이터들
  store.dispatch({type:’TEST’}); 를 해서 액션이 발생했음을 알리는데 코드가 지저분해지므로 액션만을 발생시키는 함수를 따로 만들기도한다.

리듀서 : 함수

function myReducer(state, actiion) { 
return state; 
} 

원래는 하나의 리듀서로 코드를 짤 수 있으나 하나의 리듀서에 타입을 여러개 처리하기 시작하다면 코드가 너무 지저분해지므로 리듀서를 분리하고 combineReducer를 이용해서 합친다.

Typescript + Redux
타입스크립트 코리아 : 2017.06 React-with-TypeScript 세미나 (18) - strictly-typed-usage-of-redux

 

MobX

mobx
mobx-react
@observable : 스토어 객체에 붙이는 데코레이터
@observer : 컴포넌트에서 사용하는 데코레이터

• 단일 스토어를 강제하지 않는다.
• tsconfig 에서 데코레이터(어노테이션)을 사용하겠다는 옵션을 추가해줘야한다.
• 스토어안의 데이터 변경이 props 나 state 의 데이터 변경을 의미하지 않는다.
• 라이프 사이클이 리액트의 라이프 사이클을 따라가는게 아니라서 MobX 만을 위한 라이프 사이클 함수가 따로 존재한다.