22.03.13 일

오늘 배운 것을 정리해보겠습니다.

 

1. useState - 지연 초기화

const [counter, setCounter] = React.useState(()=> {
          return jsonLocalStorage.getItem("counter")
        })

// 예시 1
async function updateMainCat(value) {
          const newCat = await fetchCat(value);

          setMainCat(newCat);
          const nextCounter = counter + 1;
          setCounter(nextCounter);
          jsonLocalStorage.setItem("counter", nextCounter);
        }

// 예시 2
async function updateMainCat(value) {
          const newCat = await fetchCat(value)

          setMainCat(newCat);
          setCounter((prev)=>{
            const nextCounter = prev + 1;
            jsonLocalStorage.setItem("counter", nextCounter);
            return nextCounter;
          })
        }

 

예시 코드 두 개를 보면 같은 결과를 가져오지만 코드가 다르다.

첫 번째 코드와 달리 두 번째 코드는 직접적인 값 대신 함수를 useState의 인자로 넘기는데 이것을 지연 초기화라고 한다.

지연 초기화를 사용하는 이유는 상태가 최초로 생성될 때만 실행되기 때문이다. 이후 발생하는 리렌더링에서 실행되지 않아 초기 값을 구하는 계산 비용이 클 때 사용한다.

코드를 자세히 보면 첫 번째 코드는 리렌더링을 할 때마다 로컬스토리지에서 값을 찾는다. 하지만 이 과정이 필요하지 않다면 생략할 필요가 있다. 그래서 두 번째 코드처럼 작성하여 불필요한 계산을 방지한다.

 

그렇다면 지연 초기화를 언제 사용하는 것이 좋을까?

매번 사용하기는 어렵다. 함수를 계산하는 비용이 직접적인 값보다 큰 경우 비효율적이기 때문이다. 그래서 비용이 큰 계산을 해야하는 상황, 배열의 .map(), .filter(), .find()이나 어떤 것을 호출할 때 사용한다면 좋을 것이다.

 

참고문헌

글자 4개로 리액트 컴포넌트를 최적화하는 방법

 

 

2. 비동기 처리

자바스크립트는 대표적인 비동기 처리 코드입니다.

비동기 처리란 특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 것을 의미합니다.

대표적인 비동기 처리 사례로 setTimeout()이 있습니다.

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

 

1. 'Hello' 출력
2. 3초 있다가 'Bye' 출력
3. 'Hello Again' 출력

우리는 이렇게 예상하고 코드를 작성했지만 실제 결과는 다르게 나옵니다.

1. 'Hello' 출력
2. 'Hello Again' 출력
3. 3초 있다가 'Bye'출력

 

이를 해결할 수 있는 방법은 다음과 같습니다.

1. 콜백함수

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);
			});
		});
	});
});

// 콜백 지옥 해결하는 방법
function parseValueDone(id) {
	auth(id, authDone);
}
function authDone(result) {
	display(result, displayDone);
}
function displayDone(text) {
	console.log(text);
}
$.get('url', function(response) {
	parseValue(response, parseValueDone);
});

 

그리고 Promise나 Async를 사용해 더 편하게 해결할 수 있습니다.

 

<여기까지 공부하다가 멈췄습니다. 다음 내용은 좀 더 공부해서 작성하겠습니다>

앞으로 Promise, Async, await, Fetch에 대해 자세히 공부해서 작성해보겠습니다.

제가 참고하는 자료는 다음과 같습니다.

 

1. 비동기 처리, 콜백 함수

자바스크립트 비동기 처리와 콜백 함수

2. Promise

자바스크립트 Promise 쉽게 이해하기

3. 자바스크립트 async와 await

자바스크립트 async와 await

4. Async & Await 문법 소개 영상

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 - 인프런 | 학습 페이지

5. Fetch

Using Fetch - Web API | MDN