23.[리액트] 리덕스 툴킷, JSON 서버, 콜백 함수로 비동기 처리 방식의 문제점 해결하기, PROMISE

툴킷을 이용했을 때 기존 버전과 큰 차이점: action value와 action creator를 직접 생성해주지 않고 

action value, action creator, reducer가 하나로 합쳐짐.

일반적인 리덕스 모듈

툴킷을 이용한 리덕스 모듈

툴킷의 slice API를 이용한 간단한 모듈작성.

 

createSlice라는 api로 생성. 

모듈의 name, initial state, reducers 로직

reducer를 작성함과 동시에 action creator가 됨 

Action value도 함수의 이름으로 자동생성됨. 

export도 제일 밑에 이렇게 작성한다.

간결해짐. 객체 내에 함수명만 추가해주면 됨

//필수로 설정해줘야하는 값은 name, initialState, reducers.
const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

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

리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서 동시에 action creator가 된다. Action value까지 함수 이름을 따서 자동으로 만들어짐. 우리는 reducer만 만들면 된다. 

 

configStore작성법.

configStore라는 method하나로 module을 합치는 것과 store생성하는걸 한번에 

 

const store = configureStore({

  reducer: { counter: counter },

});

 

모듈이 추가되면 저 안에 추가만해주면 됨

useSelector는 똑같이 이용.

 

---

콜백 함수로 비동기 처리 방식의 문제점 해결하기

 

function getData(callbackFunc) {

$.get('https://domain.com/products/1', function(response) {

callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌

});

}



getData(function(tableData) {

console.log(tableData); // $.get()의 response 값이 tableData에 전달됨

});

 

이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다.

 

 

콜백지옥

콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

많은 과정을 비동기로 처리해야 한다고 하면 위와 같이 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하게 되고, 이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵다. 

 

일반적으로 콜백 지옥을 해결하는 방법에는 Promise나 Async를 사용하는 방법이 있다. 

 

Promise

 

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용. 

$.get('url 주소/products/1', function(response) {
  // ...
});

 

 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 위와 같은 API를 사용한다. 

위 API가 실행되면 서버에 ‘데이터 하나 보내주세요’ 라는 요청을 보내는데, 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 

 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스

 

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

위 코드는 jquery의 ajax통신 API를 이용하여 지정된 url에서 1번 상품데이터를 받아오는 코드 

비동기 처리를 위해 프로미스 대신 콜백함수를 사용했다. 

 

위 코드에 프로미스를 적용하면 다음과 같다. 

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

위 코드는 서버에서 제대로 응답을 받아오면 resolve() 메서드를 호출하고, 응답이 없으면 reject() 메서드를 호출하는 예제이다. 호출된 메서드에 따라 then()이나 catch()로 분기하여 응답 결과 또는 오류를 출력.

 

var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
  console.log(user.name);
}


async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

이건 Async/Await 예제... 이전 게시글에서 다루었다

 

과제 진짜 어렵다 큰일났다 ㅠㅠ

오늘 밤샐듯