상태 끌어올리기 + 과제 필기

1. 상태 끌어올리기(Lifting State Up)

• 상태 끌어올리기: 부모 컴포넌트의 어떤 state를 변경시키는 함수(handler)를 하위 컴포넌트에 props를 전달해서 state를 변경시키는 것
• React는 단방향 데이터 흐름을 표방한다. 그렇기 때문에 이는 역방향 데이터 흐름 아니냐고 생각할 수 있다. 하지만, React에서 '상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다와 같은 해결책을 제시하였으며, 이는 단방향 데이터 흐름의 원칙에 부합한다.

 

2. Effect Hook

• Side Effect: 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우
• Pure Function: 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
• useEffect: 컴포넌트 내에서 side effect를 실행할 수 있게 하는 hook. 첫 번째 인자로는 실행할 함수를, 두 번째 인자로는 배열을 받는다. 배열 속 값들이 변경될 때마다 첫 번째 인자의 함수를 실행한다. (배열을 넣지 않을 수도 있다.)
  • 빈 배열일 경우(useEffect(함수, [])): 컴포넌트가 처음 생성될 때만 함수가 실행
  • 배열을 넣지 않은 경우(useEffect(함수)): 컴포넌트가 처음 생성될 때, props가 업데이트될 때 함수 실행

// 1. Side Effect
let iAmOne = 1;

function sizeUp() {
	iAmOne = iAmOne + 1;
}

sizeUp();	// iAmOne의 값이 변했다!

// 2. Pure Function
function plusOne(num) {
	return num + 1;
}

console.log(5);

// 3. useEffect 정말 간단한 예
useEffect(() => {
	console.log("으하하하하");
}, [iAmOne]);	// iAmOne이 변경될 때마다 "으하하하하"가 출력된다.

 

---

3. 과제 하면서 실수했던 것이나 알게 된 것

1. setTimeout에 await을 붙였는데 제대로 작동하지 않았다. 이는 setTimeout은 Promise 반환을 하지 않기 때문에, 동기적으로 적용되지 않는 탓이다.
2. useEffect 속에서 async, await 이용하는 방법

// useEffect 속에서 async, await 이용하는 방법

useEffect(() => {
    (async () => {
      const result = await getFlight(condition);
      setFlightListPart2((prev) => result);
    })();
  }, [condition]);

 

---

참고: https://footprint-of-nawin.tistory.com/97, https://stackoverflow.com/questions/33289726/combination-of-async-function-await-settimeout