IT & Tech

개발순서

1. prop로 변수와 함수를 받을 애를 먼저 개발
2. 변수-action, 함수-reducer -> action과 reducer를 정의함
3. store 생성
4. container에서 connect
   • const CounterContainer = connect( mapStateToProps, mapDispatchToProps )(Counter);
   • mapStateToProps
   • mapDispatchToProps

Provider: react-redux 라이브러리에 내장되어있는, 리액트 앱에 store 를 손쉽게 연동 할 수 있도록 도와주는 컴포넌트

해당 프로젝트에서 redux, react-redux를 쓰려면 그 프로젝트 내부에서 yarn add redux react-redux 실행해서 항상 설치해줘야 함 안그럼 yarn start하면 못찾는다고 에러남

state, action이 있음 - SA

state는 action에 따라 변화함, state가 action에 따라 어떻게 변화는지를 정의한 함수가 reducer

이전 state, action -> (REDUCER) -> 바뀐 state

reducer함수는 state, action을 parameter로 받음

// 스토어를 만들 땐 createStore 에 리듀서 함수를 넣어서 호출 

• const { createStore } = Redux;
• const store = createStore(reducer);
• store를 만들고나면 store.getState()로 state를 가져올수 있음
• store.subscribe(render); //store를 구독할 때는 변화할때마다 실행된 listener(render)를 지정함
• btnIncrement.addEventListener('click', () => { store.dispatch(increment(25)); })//action 객체를 리턴함으로 action에 따라 state가 변하게 함
• store.dispatch -> action 리턴 -> action에 따라 state변함 -> state변화면 화면도 바뀜

Ducks구조

• src/actions/ActionTypes, index.js 이렇게 분리하지 않고 src/modules/index.js안에 통합

redux-action

• createAction: Action 객체 리턴하는 부분을 간략화
• handleAtions: reducer함수가 switch로 사용되어 각 액션에 따른 동작을 정의하는데 제한이 있는 문제를 해결

• 페이스북에서 사용자 경험을 향상하기 위해 만든 라이브러리
• 프레임워크가 아님 -> 사용자 인터페이스 라이브러리
  • framework과 library의 차이는? 프레임웤이라고 할 정도면 프로그램의 흐름의 주도권이 프레임웤에 있어서 기본 구조가 모두 구성되어 있고 개발자는 필요한 기능 구현에만 초점을 맞출 수 있도록 하는 수준이 되는 것...? 일반적으로 프레임웤>라이브러리 로 규모가 더 큰 걸 의미함, 근데 어디까지는 프레임웤이고 그 아래는 라이브러리다라고 무자르듯 구분하기 쉽지 않음
• HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어있지 않음 -> view단에 집중
  • 라우터: React-router, Next.js, After.js
  • 상태관리: Redux, MobX, fr(e)actal 
• virtual DOM을 사용한 성능향상 (Vue, Marko, Maquette, Mithril도 virtual DOM사용)
  • virtual DOM에 대한 자세한 설명 https://velopert.com/3236
  • 브라우저와 렌더링 엔진(크롬, 사파리는 웹킷, 파이어폭스는 게코라는 렌더링 엔진 사용)에 대해 좀 알아야 깊이 이해할 수 있음, 나중에 더 공부하는 걸로...
• 단방향 데이터 바인딩
• component를 사용한 생산성 증가 -> JSX 문법 사용
  • html, xml형태로 리턴하여 컴포넌트화, 실제로는 html이 아니라 이게 다 javascript 엄청나게 장황한 긴 코드로 변환이 됨 -> 바벨에 의해 React.createElement('div',...)로 바뀜
  • https://ko.reactjs.org/docs/introducing-jsx.html
  • jsx 사용법, jsx를 이용한 조건부 렌더링: https://velopert.com/3626