TIL 15

Effect Hook

Side effect란

보통 리액트 앱을 작성할 때는 AJAX 요청이 필요하거나 LocalStorage 또는 Timer API, HTTP API 등 많은 비동기 호출 이용시, 리액트는 이를 side effect로 받아들인다.
이러한 side effect를 효과적으로 다루기 위한 방법이 Effect Hook을 사용하는 것이다.

useEffect

useEffect는 컴포넌트 안에서 Side effect를 실행할 수 있게 하는 Hook이다.
예를 들어, 비동기 API를 호출하는 등의 side effect를 useEffect로 관리하는 것이다.
useEffect는 두 개의 인자를 갖는데, 첫번째는 side effect를 실행하는 함수이다.
두번째 인자는 종속성 배열이다. 배열내 어떠한 값이 변할 때만 side effect 함수가 실행된다.
만약 두번째 인자를 넣지 않는 경우, 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, 상태가 업데이트될 때 함수가 실행된다. 만약 두번째 인자가 빈배열이라면 컴포넌트가 처음 생성될 때만 effect 함수가 작동하고, 이후에는 작동하지 않는다.

추가 학습

Default Parameter(기본 파라미터)

default function parameter를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.

• ES6 문법
• 인자가 정상적으로 잘 전달되면, 그 인자가 들어옴
• 인자가 없거나, undefined면, 기본 파라미터로 대체됨

function multiply(a, b = 1) {
  // 두번째 parameter를 default parameter로 1 할당
  return a*b
}

multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

Promise와 then의 사용법

Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.
기본적으로 promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체입니다.

비동기로 음성 파일을 생성하는 createAudioFileAsync() 함수를 가정하자.
이 함수는 두 가지 콜백 함수를 받는다. 동작이 성공했을 때 실행되는 콜백, 그리고 에러가 발생했을 때 실행되는 콜백이다.

function successCallback(result) {
  console.log("Audio file ready at URL: " + result);
}

function failureCallback(error) {
  console.log("Error generating audio file: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Promise를 사용하면 위의 예시처럼 콜백들을 전달하지 않고 콜백을 붙여 쓸 수 있다.

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

또는

const promise = createAudioFileAsync(audioSettings);
promise.then(successCallback, failureCallback);

then()을 여러번 사용하여 여러개의 콜백을 추가할 수 있다. 각각의 콜백은 순서대로 실행된다.
여러개의 비동기 작업을 수행할 때 순서를 정해주기 위해 Promise chain을 활용할 수 있다.
then() 함수는 새로운 Promise를 반환한다. 이는 처음 만들었던 Promise와 다른 Promise다.

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);
// 또는
// const promise2 = doSomething().then(successCallback, failureCallback);

각각의 Promise는 체인 안에서 서로 다른 비동기 단계의 완료이다.
Promise의 사용은 콜백 지옥을 예방하기도 한다.

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);

then에 넘겨지는 인자는 선택적이다. 그리고 에러를 포착하는 콜백인 catch(failureCallback)는 then(null, failureCallback)의 축약이다.
아래는 화살표 함수를 사용한 동일한 Promise 체인이다.

doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
  console.log(`Got the final result: ${finalResult}`);
})
.catch(failureCallback);