TIL 23.11.14 리액트 리듀서 사용법(액션함수)

오늘 한일

• 알고리즘 문제풀이
• 리액트 리듀서 사용법(액션함수)
• use navigate사용법
• REST API 정리
• fetch 함수
• .then 을 async await로 변경하기

-알고리즘 문제 - 평균구하기 -

비교적 간단한문제였다 reduce 함수를이용해서 안의 배열을 모두더한후 배열.length로 나눠서 마무리

 

• 리액트 리듀서 사용법(액션함수)

리액트를 다뤄보면서 리듀서라는 함수를 다뤄봤다 누르면 숫자가 올라가는 카운터를

만들어보았다 그 과정을 간단하게 설명하자면

리듀서 : `state에 변화를 일으키는 함수

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

 

reducer를 사용하기위해서는 usestate처럼 set state 가아닌action을 사용한다

수많은 스테이트 관리를 위해서 역션함수를 사용한다

1. Action Creator

• (1) Action Creator 란?
• 만약에 우리가 액션객체의 value를 변경할 일이 생긴다면 어떨까요? PLUS_ONE , MINUS_ONE 이라는 value 대신 이 액션객체가 counter 모듈안에 있다는 것을 강조하기 위해서 counter/PLUS_ONE, counter/MINUS_ONE 이라는 value로 바꾸길 각각 바꾸길 원한다면 아래 코드에서 4군데를 변경해줘야 할 것 입니다. 근데 또 만약에 그게 4군데가 아니라 프로젝트 규모가 굉장히 커서 100군데라면 어떨까요? 곤란하겠죠?

2. 왜 Action creator를 사용해야 하나?

• (1) 휴먼에러 (오타) 방지
• 액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있습니다. 그래서 의도치 않은 휴먼에러(오타)를 없앨 수 있어요.
• (2) 유지보수의 효율성 증가
• 우리가 만든 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있습니다.
• (3) 코드 가독성

정리

• 액션객체를 만드는 함수를 Action Creator(액션 크리에이터)라고 한다.
• Action Creator는 모듈 파일안에서 생성된다.
• 액션객체의 type value로 상수로 생성해서 관리한다.
• Action Creator를 사용하면, 여러가지 문제점을 해소할 수 있다.

디스패치 (dispatch)

위에 주석처리된 문구와 아래 dispatch 함수를 사용한 plusOne은 같은 동작을 실행해준다

디스패치는 스토어의 내장함수 중 하나다. 디스패치는 액션을 발생 시킨다

dispatch 라는 함수에는 액션을 파라미터로 전달한다. ex dispatch(action)

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는

로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.

 

스토어 (Store)

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됩니다. 스토어 안에는,

현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다.

 

 

• use navigate사용법

use navigate 를 사용하게되면 페이지내에 이동경로를 설정해줄수있다

사용하기위해서는 React Router Dom 이필요한데

1. react-router-dom이란?

• (1) 페이지를 구현할 수 있게 해주는 패키지
• 이 페이지에도 갔다가 저 페이지에도 갔다가 이동할 수 있게 도와준다.