본문 바로가기

React 실습

리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기

728x90

*  백앤드 서버를 추가하여 데이트를 서버에 저장하고, 가져오는 작업을 리덕스와 함께 해보자.

*  백앤드 서버를 직접만드는 것 어려우니 더미 데이터베이스용으로 firebase를 이용한다.

* 리덕스내에 함수는 부수효과가 없는 순수함수여야 합니다

* 순수함수? 함수의 안팎에서 뭔가 예기치 않은 일이 생길 가능성이 있는 함수는 순수함수가 될 수 없습니다

입력이 이루어지면 입력에의 변하는 값이 동일해야 한다고 생각하면 되겠습니다.

하지만 우리는 현재 백앤드 서버에 http요청을 하고 하는 작업을 하기 때문에 중간 과정에 state값이 바뀔 수 있습니다.

 

2가지 방법이 있는데

첫번째 방법인 컴포내부에 부수효과인 비동기코드를 넣는것부터 해보자.

두번째 방법은 액션 함수에 넣는 것이다.

 

 

< 하려는 것 >

- 리덕스에서 데이터를 모두 처리하고, App.js에서 state 변경을 감지하고 감기되면 그때 백앤드에 전송하는 방법

 

1.  useEffect안에 부수효과가 있는 fetch를 넣어서 Firebase에 보낼거임.

2. PUT HTTP 요청을 해서 기존의 데이터르 오버라이드 할거임.

 

린 컴포넌트가 모든 논리를 사용하여 fat 리듀설르 만든다음 리덕스 상태에 따라 달라지는 부수 효과를 수행할 수 있게 된다

 

=> firebase에 알맞은 데이터가 전송된다.

 

but!! 이런식으로 useEffect()를 사용하며 문제가 잇다.

 

이것은 초기(즉, 비어 있는) 카트를 백엔드로 보내고 거기에 저장된 모든 데이터를 덮어쓰기 때문에 문제입니다.

우리는 다음 강의에서 이것을 고칠 것입니다, 나는 단지 그것을 지적하고 싶었습니다!

 

이것에 대한 해결법과 나머지 방법은 다음 포스트에...

 

마지막으로 주요 사용할 법은 코드와 함께 설명을 할 예정

 

 

 

 

 

 

 

728x90