리액트 심화

json-server+Mock API

Mocking API? mocking api는 실제로 REST API가 구축되어 있지 않더라도, 있는 것처럼 테스트 환경을 만들어주는 것이다. 실제로 뭔가 저장하진 않고 흉내만 내는 거니까 프로덕션 레벨에서 사용할 수 없다. → API 준비가 덜 된 상태로 개발 진행을 한다거나 공부할 때 쓰기 좋다. 한계점 텍스트 데이터와 관련된 프로토타입을 만들 때만 사용가능하다 인증을 기반으로 API 영역에 한계를 설정할 수 없다. Mock API는 실서버 환경에서는 사용할 수 없으며, 사용되어져서는 안된다 Mock API 설정하기 Mock API를 사용할 폴더에서 프로젝트를 초기화해서 package.json 파일을 만들자 yarn init -y 패키지 설치하기 yarn add json-server DB로 쓸 jso..

Redux Tool kit

Redux Took kit? 리덕스를 사용하려면 작성해야할 코드와 파일이 기본적으로 너무 많다 → 보일러플레이트가 증가한다! Redux Tool Kit은 리덕스를 편하게 사용하는데 유용한 패키지가 들어있는 도구 모음이다! Redux Tool Kit을 사용하면 Action Type, Action Creator, Initial Value, Reducer를 한번에 묶어서 사용할 수 있다! Redux / Redux Tool Kit 설치 yarn add redux react-redux yarn add @reduxjs/toolkit 리덕스 모듈(슬라이스) 만들기 src 폴더 아래에 redux라는 폴더를 만들고, 그 안에 modules라는 폴더를 만들자. modules 아래에 bucketSlice.js라는 리덕스 모..

Context API

공식문서 https://ko.reactjs.org/docs/context.html#caveats Context – React A JavaScript library for building user interfaces ko.reactjs.org Context API? react는 16.3 버전부터 정식적으로 Context API를 지원하고 있다. 일반적으로 부모와 자식간 props를 날려 state를 변화시키는 것과는 달리 context api는 컴포넌트 간 간격이 없다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 즉, 컴포넌트를 건너띄고 다른 컴포넌트에서 state, function을 사용할 수 있다. 또한 redux의 많은 어려운..