[React] 스파르타코딩 내일배움캠프 React 심화 내용 정리

Redux-Toolkit

Redux Toolkit

• 리덕스의 단점
  • ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다
• 리덕스 툴킷
  • 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것
  • 리덕스의 구조와 패러다임이 모두 똑같다
  • 컴포넌트에서 useSelector를 통해서 사용하는 것은 동일
  • 바뀐 부분 ⇒ 모듈 파일
• 리덕스 툴킷 설치하기

yarn add react-redux @reduxjs/toolkit

• Slice API
  • createSlice 라는 API를 통해 만들 수 있다
  • 필수로 name, initialState, reducers 를 작성해야 한다.

  //createSlice API 뼈대
  
  const counterSlice = createSlice({
  	name: '', // 이 모듈의 이름
  	initialState : {}, // 이 모듈의 초기상태 값
  	reducers : {}, // 이 모듈의 Reducer 로직
  })
  

  • reducers 안에 만든 함수 자체가 리듀서의 로직이자 Action Creator가 된다
  • export 하는 방법

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

 

 

 

Redux Devtools

• Redux Devtools설치 : 링크 바로가기
• 리덕스를 사용하면 리덕스 devtools를 사용할 수 있다
• 현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있다

 

 

 

json-server

json-server란?

• 아주 간단한 DB와 API 서버를 생성해주는 패키지
• 백엔드에서 실제 DB와 API Server가 구축될 때까지 프론트엔드 개발에 임시로 사용할 mock data를 생성하기 위해서 사용
• json-server 설치
• yarn add json-server

 

 

 

json-server 사용하기

• 리액트도 start 해야 하고, json-server로 start 해야 한다 ⇒ 그래야 통신 가능
• json-server 실행 명령어
• yarn json-server --watch db.json --port 3001
• 명령어를 입력하면 db.json이 자동으로 생성된다 ⇒ 이 파일을 db로 사용하는 것

 

 

 

Axios

Axios

• node.js와 브라우저를 위한 Promise 기반 http 클라이언트
• http를 이용해서 서버와 통신하기 위해 사용하는 패키지
• Axios 설치하기
  • yarn add axios

 

 

 

json-server 설정

• 배포 전에는 한 프로젝트 내에서 3001 포트로 서버를 가동시켜 사용

 

 

 

GET

• Axios.get
  • get : 서버의 데이터를 조회할 때 사용

  // url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
  // config는 axios 공식문서에서 확인하세요.
  
  axios.get(url[, config]) // GET
  

  • Axios config 공식문서 소개 링크
• ⭐ json-server API 명세서 확인하기 ⭐
  • Axios는 GET 요청을 할 수 있도록 도와주는 패키지이지 방식에 대한 확인은 API 명세서를 봐야 한다
  • json-server의 공식문서를 보면, 전체 정보나 상세 정보는 아래와 같이 path variable 로 url을 작성
  • filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query로 보내라고 명시하고 있습니다.

POST

• Axios POST
  • post는 보통 서버에 데이터를 추가할 때 사용
  • post 요청에 대한 로직은 BE 개발자가 구현하기 때문에 다른 용도로 사용될 수 있지만, 보통은 클라이언트의 데이터를 body 형태로 서버에 보내고자 할 때 사용

axios.post(url[, data[, config]])   // POST

DELETE

• Axios Delete
  • DELETE : 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용합니다.

axios.delete(url[, config])  // DELETE

PATCH

• Axios Patch
  • patch : 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드
  • http 환경에서 서로가 한 약속이자 문맥이기 때문에 반드시 patch, put을 써야하는 것은 아님
  • 그렇지만 대부분의 개발자들이 지키고 있다.

axios.patch(url[, data[, config]])  // PATCH

 

 

 

.env

• .env 란 무엇이고 왜 사용하며 어떻게 사용해야할까? 아래 내용음 참고하여 .env 이용해서 우리가 사용할 API 서버의 IP 또는 URL을 숨겨서 처리해봅시다.
• [React] .env (환경변수 관리)

[React] .env (환경변수 관리)

 

 

 

 

thunk

Redux 미들웨어

이미지 출처 : 벨로퍼트 모던 리액트 깃북

• 리덕스에서 dispatch를 하면 action이 리듀서로 전달되고, 리듀서는 새로운 state를 반환한다
• 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.
• 미들웨어를 사용하는 이유
  • 서버와의 통신을 위해서
  • 주로 Redux-thunk를 사용

 

 

 

thunk

• thunk를 사용하면 우리가 dispatch를 할 때 객체가 아닌 함수를 dispatch할 수 있게 해준다.
• dispatch(객체)가 아니라 dispatch(함수)를 할 수 있게 되는 것
• 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고 그것이 중간에 실행된다
• thunk 함수
  • dispatch(함수) → **함수실행** → 함수안에서 dispatch(객체)
• 리덕스 툴킷에서 Thunk 함수를 생성할 때는 createAsyncThunk 를 이용한다.
• createAsyncThunk() 의 첫번째 자리에는 action value, 두번째에는 함수가 들어간다.
• 두번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데, 첫번째 인자는 컴포넌트에서 보내준 payload이고, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.
• dispatch: thunk 함수안에서 dispatch를 할 때 사용
• getState: thunk 함수안에서 현재 리덕스 모듈의 state 값을 사용하고 싶을 때 사용
• fulfillWithValue : 툴킷에서 제공하는 API
  • Promise에서 resolve 된 경우, 다시 말해 네트워크 요청이 성공한 경우에 dispatch 해주는 기능을 가진 API
  • 인자로는 payload를 넣어줄 수 있다
• rejectWithValue : 툴킷에서 제공하는 API
  • Promise가 reject된 경우, 즉 네트워크 요청이 실패한 경우 dispatch 해주는 기능을 가진 API
  • 인자로 어떤 값을 넣을 수 있다 (error 객체도 가능)
• extraRecuders 에서는 아래와 같이 pending, fulfilled, rejected에 대해 각각 어떻게 새로운 state를 반환할 것인지 구현할 수 있다

 

 

 

React Hooks : optimizing

memo()

• 훅은 아니지만, useCallback이나 useMemo를 사용하기 위해서는 알아야 하는 개념이다
• Memo : 컴포넌트의 불필요한 리렌더링을 하지 않도록 해주는 함수
• 불필요한 리렌더링
  • 화면에서 변경되는 부분이 없음에도 불구하고 다시 렌더링 되는 것
    • 렌더링 되는 이유들
      1. 부모 컴포넌트가 렌더링 된 경우
      2. 컴포넌트의 state가 변경된 경우
      3. 부모로부터 전달받은 props 값이 변경된 경우
  • 불필요한 리렌더링을 줄이는 것으로 리액트 프로젝트의 부하를 줄이고 퍼포먼스 능력을 향상시킬 수 있다

 

 

useCallback

• 컴포넌트가 리렌더링되더라도 생성된 함수를 새로 만들지 않고 재사용하고자 할 때 사용하는 훅
• memo()를 사용했음에도 리렌더링되고 있는 원인을 해결할 수 있는 훅
• useEffect와 비슷하게 사용가능
• useCallback() 안에서 첫번째 매개변수로 구현하고자 하는 함수가 들어오고, 두번째 매개변수자리에는 의존성 배열이 들어온다
• useCallback을 사용하면 함수가 생성되고 나서 재생성되지 않는다
• 함수를 재생성해줘야하는 경우에는 의존성 배열에 값을 넣어주면 해당 값이 변경되었을 때 이 함수도 같이 재생성된다

 

 

 

useMemo

• useCallback과 똑같은 기능을 하는 훅
• 대상이 함수가 아니라 배열이나 객체와 같은 값일 때 사용
• 사용원리와 방법 역시 useCallback과 동일

 

 

 

주의사항

• memo() 를 사용하면 컴포넌트의 불필요한 리렌더링을 막을 수 있다.
  • 다만, 컴포넌트의 props가 있는 경우 useCallback과 useMemo를 적절하게 사용하여 리렌더링의 원인이 되는 것을 모두 제거해줘야 정상적으로 작동한다.
• useCallback의 대상은 함수, useMemo의 대상은 객체나 배열과 같은 값이다.
  • 원시타입 데이터는 useMemo를 사용하지 않아도 리렌더링하지 않습니다. → useMemo 안써도 됩니다.

 

 

 

 

Custom Hook

Custom Hook

• 반복되는 로직이나 중복되는 코드를 custom hook을 통해서 관리할 수 있다
• 리액트에서 제공하는 내장 훅을 사용해서 나만의 훅을 만든다는 의미
• 반드시 파일 이름 앞에 use라는 키워드를 붙여줘야 한다
• src 폴더에 hooks 라는 폴더를 생성해서 커스텀 훅을 보관하는 방식으로 디렉토리 구조를 설계한다
• 커스텀 훅을 만들면 중복코드가 사라지고 전체적인 코드의 양도 감소한다

 

 

 

 

 

 

 

---

노션에는 예제도 함께 적어서 괜찮았는데 예제 빼고 적으니까 좀 정돈되지 않은 느낌이다(?)

아직 내가 100% 이해하지 못해서 그런가...

그렇지만 강의 듣고 늘 하던 거라서 그냥 정리해두었다. 이것도 나중에 언젠가 쓸 일이 있겠지...ㅎ