2021.06.30 - TLI

나만알아보는

Redux

• dispatch(action()) -> reducer(스테이트값변경) -> useSelector(변화감지) -> 새로운뷰

  <Provider stroe={store}>
    <App>
  </Provider>

  위와 같이 store와 컴포넌트를 연결 변화를 감지하고 새로운뷰를 보여줄 수 있게 연결을 해준다.

  리덕스 connet
  hook이 아닌 사용법 알아둘 필요가 있다.
  usedispatch => connet(mapStateToProps, null)()
  useSelector => connet(null, mapDispatchToProps)()

  비동기는 redux-thunk를 사용한다.

// src/services/note.js
import aixos from 'axios';

const baseUrl = www.exmaplenotes.com

const getAll = async () => {
  return await axios.get(baseUrl).data

export defalut { getAll }
 
// src/reducers/notereducer
  export const initializeNotes = () => {
  return async dispatch => {
    const notes = await noteService.getAll()
    dispatch({
      type: 'INIT_NOTES',
      data: notes,
    })
  }
}

Typescript

• Typescript is superset of JS.
• 컴파일: 코드를 사람이 읽을 수 있는 형식에서 기계가 읽을 수 있는 형식으로 변환되는 것.
  타입스크립트에서 사람이 읽을 수 있는 소스코드는 사람이 읽을 수 있는 다른 소스코드로 변환되기 때문에 정확한 용어로는 trnaspiling이다.
• TypeScript는 JavaScript의 상위 집합이라는 것은 JavaScript의 모든 기능과 자체 추가 기능도 포함한다는 것을 의미합니다

export interface { ... }

참고자료

Compiling vs Transpiling
https://stackoverflow.com/questions/44931479/compiling-vs-transpiling