1. 리액트는 프레임워크가 아니다. 라이브러리다.\n리액트는 two-way data flow가 아니라 one way flow다.\n리덕스가 flux 라이브러리\n프레임워크랑 라이브러리 차이 알아보기!\n\n2. 버츄얼 DOM은 새로운 부분만 렌더링 해줌. 리액트의 큰 특징 중 하나. 리액트의 장점 : 버츄얼 DOM을 써서 빠르다! component reRender를 효과적으로 할 수 있게 해줌.\n\n3. DOM을 잘 바꿀 수 있게 해줌.\n\n4. props 부모 컴퍼넌트로부터 자식 컴퍼넌트로 속성을 내려주는데 사용, state는 컴퍼넌트의 현재 상태를 나타냄. 라이프 사이클을 통해서 액션을 바꿔줌. 컴퓨터는 상태기계. 상태를 조절하는 것이 컴퍼넌트. 어떤 때 pros를 쓰고, 어떤때 스테이터스를 써야 하는지 알아야 한다.\n\n5. import, export 같은 경우를 es5로 바꿔줌. Babel은 컴파일러지, 번들러는 아님. 3가지 차이점(컴파일러, 트랜스파일러, 번들러의 차이를 알아야 함. 공식 문서를 읽어야 함.)\n\nRedux의 정의(3번) : Redux is the name of a Flux library that is used to manage state in a React application.\n\nAjax는 native로 짤 수도 있고, 진화된 형태의 fatch api도 있음.\n\n6. state에 대한 설명\nState should be held at the top-most component that needs access to it\n상태는 꼭 상위에 있을 필요는 없다. 자체내에서 관리만 할 수 있다면. state 관리가 리액트의 난제이자 숙제이고, 그걸 해결해보겠다는게 리덕스.\nComponents manage their own state.\nInitial values can be set for state\n\nState can be passed from parent components to child components as props\n\n7. functional도 내부적으로 렌더 됨. return은 항상 있어야 함.\nreturn도 렌더와 동일.\narray 형태로 return이 됨. multiple 형태로 return이 됨. 이건 최근 변경상황.\n소괄호하는 것은 사실 return(return statement를 생략한 es2016 문법)\n\n* 모든 컴퍼넌트는 엘리먼트를 리턴함.\n스테이트풀하다 -> 클래스로 만든 것\nstate는 순수 오브젝트.\n\n9. 1번 어느 정도는 동의하지만 리덕스에 비하면 별로라는 의미로?\n 프레임 워크가 아니다. 모든 유틸리티를 제공하지 않는다.\n\n11. didmount?\n 언제 데이터가 들어올지 모르니까!\n 라이프 싸이클은 자체적으로 돌아가고.\n\trender에 사이트 이펙트가 생길만한 것을 넣으면 안됨.\n\t다 mount 된 이후에 state가 안전하게 셋할 수 있는 환경을 만들어야.\n 생각해볼 문제.\n\n12. Define a function that updates state on component A, pass the function as a prop to component B, and invoke the function when B is clicked on.npm i -S redux
지니는 방 자체를 새로 만들어서, 방을 바꿔 버립니다. 이런 방식이 redux가 사용하는 방법. flux 아키텍쳐를 구현한 라이브러리. 컴퍼넌트 및 데이터 교류를 쉽고 효율적으로 하게 함.
\nflux는 아이디어. 그냥 추상적인 개념이고, 이걸 구현한게 redux.
\nmvc 패턴은 컨트롤러 -> 모델 -> 뷰
\n모델 뷰의 구조가 엄청 복잡함.
\n채팅창이 여러개 있는데, 동시에 채팅을 보여주는 모든 컴퍼넌트가 다 렌더링되어야 함. 페이스북에선 기존 문제로는 해결할 수가 없었음.
\nACTION -> DISPATCHER -> STORE -> VIEW
\n시스템이 어떤 액션을 받았을때, 디스패쳐가 받은 액션이 있다면 스토어에 전달하고 변동된 상황이 있으면 뷰에 렌더링. 단, 뷰에선 스토어에 접근하지 않음! 뷰에서 디스패처로 액션을 보내고, 디스패쳐에선 중첩되지 않게 함.
\n어떤 액션이 디스패치를 통하여 스토어에 있는 데이터를 처리하고
\nhttp://bestalign.github.io/2015/10/06/cartoon-guide-to-flux/cd
\n리덕스 원칙
\n{\n type : "WITHDRAW_MONEY",\n amount : "$10,000"\n}state를 업데이트 하거나 바꾸기 위해서는, need to dispatch an action.
\n스토어, 리듀서, 액션이 어떻게 작동하는지 이해해야 한다.
\n리덕스 세상에서는 action을 reducer에게 전달하는 것을 의미한다. 리듀서는 뭘 해야 할 지 알고 있고, 늘 항상 새로운 state를 반환한다
\nreact에서 리덕스를 사용할때 첫번째 컴포넌트 리팩토링은 내부에서 구성 요소를 제거하는 것.
\n리듀스는 리덕스에서 가장 중요한 개념. 감속기. 뭔가를 줄이는 개념이 맞다. JS의 array.reduce처럼 단지 기능일뿐이다. 두 개의 매개 변수를 취하는 함수이며, 첫 번째는 STATE, 두번째는 ACTION이다. 그렇다면 어디서 리듀서에게 스테이트와 액션을 전달하는지 궁금할 것. createStore(reducer)에서 전달한다.
\nfunction createStore(reducer) {\n var state;\n var listeners = []\n\n function getState() {\n return state\n }\n\n function subscribe(listener) {\n listeners.push(listener)\n return unsubscribe() {\n var index = listeners.indexOf(listener)\n listeners.splice(index, 1)\n }\n }\n\n function dispatch(action) {\n state = reducer(state, action)\n listeners.forEach(listener => listener())\n }\n\n dispatch({})\n\n return { dispatch, subscribe, getState }\n}import { createStore } from 'redux'\nconst store = createStore(reducer) //this has been updated to include the created reducer.## reducer 코드\nexport default (state) => {\n return state\n} // 항상 new state를 반환한다.그래서 그렇게 바꿔줘야 하는 거. 기존 state 데이터는 몽땅 store에 넣는 것이 원칙. (로컬 state를 좀 사용해도 괜찮긴 하다.)
\nRedux is a predictable state container for JavaScript apps.
\nThe createStore factory function from Redux is used to create a Redux STORE
\nThe Reducer is the only mandatory argument passed into createStore()
\nA REDUCER is just a function. A function that takes in two parameters. The first being the STATE of the app, and the other being an ACTION
\nA Reducer always returns the NEW STATE of your application.
\nThe INITIAL STATE of your application, initialState is the second argument passed into the createStore function call.
\nStore.getState() will return the current state of your application. Where Store is a valid Redux STORE.
\nsetState()와 달리 리덕스는 state를 업데이트 하기 위한 유일한 방법은 REDUCER에 의도를 알리는 것이다. ACTION을 넘기는 방법인 dispatching actions로. Action은 반드시 type field가 필요하다. 이 필드가 액션의 의도를 설명하기 때문이다.
일반적인 패턴은
\n{\n type : \"\",\n payload : {}\n}ex)
\n{\n type : \"withdraw_money\",\n payload : {\n amount : \"$4000\"\n }\n}type은 작업을 설명\npayload는 정보를 넣는 객체
\nfunction reducer(state, action) {\n //return new state\n}\n\n일반적인 패턴은\n\nfunction reducer(state, action) {\n switch (action.type) {\n case \"withdraw_money\":\n //do something\n \tbreak;\n case \"deposit-money\":\n //do something\n break;\n default :\n \treturn state;\n }\n}다시 기억하자. 리덕스에서는 state object를 관리하기 위해 setState()를 사용할 수 없다.
\n리덕스 앱에서는 모든 작업이 reducer를 통과한다. 액션을 구분하기 위해 action.type을 지정하여 사용한다.
\nfunction reducer(state, action) {\n switch (action.type) {\n case 'is_open':\n return //return new state\n case 'is_clicked':\n return //return new state\n default:\n return state\n }\n}export function setTechnology(text) {\n return {\n type: 'SET_TECHNOLOGY',\n tech: text,\n }\n}es6 ver.
\nconst SetTechnology = text => ({ type: 'SET_TECHNOLOGY', text })actions, reducers , store 폴더를 만들어서 각각 저장하는게 일반적.
항상 새로운 state를 반환해야 함.
\n// 아래처럼 하면 절대 안 됨!\nexport default (state, action) => {\n switch (action.type) {\n case 'SET_TECHNOLOGY':\n state.tech = action.text\n return state\n\n default:\n return state\n }\n}\n\n// 대신에\nreturn {\n ...state, // 이렇게!\n tech: action.text,\n}이렇게 해야 한다. 상태를 변경하는 대신\n새로운 객체를 반환해야 한다.
","frontmatter":{"title":"Immersive Sprint - REDUX","date":"October 09, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20181008-20181009 IM08D15-16 REDUX/","previous":{"fields":{"slug":"/til/20181004-1006 IM08D12-14 REACT/"},"frontmatter":{"title":"Immersive Sprint - REACT","category":"TIL"}},"next":{"fields":{"slug":"/til/20181010-20181011 IM08D17-18 NODE JS/"},"frontmatter":{"title":"Immersive Sprint - NODE.js","category":"TIL"}}}}