뭘 조심해야 할까👀 비동기 & batching useState 훅을 사용해서 상태를 업데이트 하고 바로 아래 console로 업데이트한 상태를 출력하면 이전의 상태 값이 나온다. const updateCount = () => { setCount(count + 1); // 2 console.log(count); // 1 } 왜 이럴까? 리액트에서 useState를 사용해서 상태를 업데이트할 때 비동기적으로 상태를 한번(batching)에 업데이트하기 때문이다. → 바로 값이 변경되면 리렌더링(Re-rendering)이 발생하기 때문이다! 만약 변경된 상태를 이용하고 싶으면 useEffect를 이용해서 상태가 변경된 후 상태를 사용하자! const updateCount = () => { setCount(co..

How - useInview 무한 스크롤을 스크롤 이벤트를 통해서 구현하기도 하고 여러 방법이 있겠지만 react-intersection-observer의 useInView 훅을 사용해 쉽게 구현할 수 있다. yarn add react-intersection-observer useInView의 첫번째 파라미터로 ref를 설정할 수 있고 두번째 파라미터는 ref가 걸린 요소가 화면에 보이면 true로 값이 변경되고 화면에 보이지 않으면 false로 변한다 const [ref, isView] = useInView() 아래 예시를 살펴보자! 맨 아래 요소에 ref를 걸고 useEffect를 이용해서 맨 아래 요소가 화면에 보이는 여부에 따라 isView가 변경될 때마다 콘솔에 isView를 출력해보자! imp..

Why? React와 Mock API를 구동하기 위한 서버가 다르기 때문에 json-server나 node.js로 구축한 서버를 동시에 실행 시키려면 각각 다른 명령 프롬프트에서 실행 시켜야 한다! 예를 들어 아래처럼 각각 다른 프로젝트를 열어서 실행시켜야 한다..ㅠㅠ // 리액트 프로젝트에서 yarn start // mock api를 사용하는 프로젝트에서 yarn json-server --watch db.json --port 5008 하지만 concurrently를 사용하면 한 터미널에서 서버 두개를 한번에 실행 시킬 수 있다! 사용법 리액트 설치 yarn create react-app test json-server 설치 yarn add json-server concurrently 설치 yarn add..

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..

react-router-dom v6 공식문서 ↓↓↓ https://reactrouter.com/docs/en/v6/getting-started/overview React Router | Quick Start Declarative routing for React apps at any scale reactrouter.com react-router-dom v6은 React Hook을 많이 사용하므로 React 16.8 버전이상을 사용해야 한다/ v5에서 사용하던 Switch가 Routes로 변경되었고 exact 옵션 대신 url 뒤에 /*를 붙여서 사용한다 component를 넣어줄 때 component 대신 element를 사용한다 중첩 라우팅이 굉장히 사용하기 편해졌다 v5 사용법 ↓↓↓ https://d..

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라는 리덕스 모..