로딩 화면 제공하기

 useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true); //로딩중
      const data = await getFlight(condition);
      setFlightList(data); // getFlight결과 > flightList 상태로 업데이트.
      setIsLoading(false); 
    };
    fetchData();
  }, [condition]);

이 코드는 useEffect hook을 사용하여 비동기로 데이터를 가져와 상태를 업데이트하는 동작을 수행한다.
(useEffect 함수는 컴포넌트가 렌더링될 때마다, condition 상태가 변경될 때마다 useEffect의 콜백 함수를 실행.)

1. setIsLoading(true)를 호출하여 로딩 상태를 true로 설정 > 로딩 중.

2. await getFlight(condition)을 호출하여 getFlight 함수를 실행 > 서버 API를 호출하여 ~~데이터를 가져옴. > API 호출이 완료 후 데이터가 반환 > const data = await getFlight(condition)의 data 변수에 데이터가 할당.

3. setFlightList(data)를 호출 > flightList 상태 업데이트.

4. setIsLoading(false)를 호출하여 로딩 상태를 false로 설정 > 로딩완료.

즉, useEffect hook은 컴포넌트가 마운트될 때와 condition 상태가 변경될 때마다 데이터를 가져와 상태를 업데이트하는 동작을 수행하며, 그 과정에서 로딩 상태를 관리한다.

const [isLoading, setIsLoading] = useState(false); (usestate초기값 false로 지정해야함!)

종합퀴즈 다 틀렸다!!!!@~@!~@@!~

그래서 정리함..

React 데이터 흐름

React에서의 데이터 흐름은 일반적으로 단방향이며, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달한다. 이를 상위 컴포넌트에서 하위 컴포넌트로의 props 전달이라고 하고 데이터 흐름이 하향식임을 의미한다.

입력에 따라 변하는 값을 상태(state)라고 한다.

상태 판단 방법

• 부모로부터 props를 통해 전달되는가?
• 시간이 지나도 변하지 않는가?
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가?

만약 하나의 상태를 기반으로 여러 컴포넌트가 영향을 받는다면 상태를 어디에 위치시켜야할까?
이때는 공통 소유 컴포넌트 > 즉, 공통 부모 컴포넌트에 상태를 위치해야한다.

근데 또 정하고보니 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 경우가 있다.
하위 컴포넌트 이벤트가, 부모의 상태를 바꾸어야만 하는 상황이 있을때의 해결 방법이 바로 State 끌어올리기(Lifting state up)다.

State 끌어올리기(Lifting state up)

콜백함수와 비슷하다. 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있다.

구현방법

1. 공유할 상태를 결정 > 해당 상태를 상위 컴포넌트에 생성. 이 상태는 하위 컴포넌트들이 사용할 수 있도록 props로 전달됨.

2. 하위 컴포넌트에서 상태를 읽거나 변경해야 할 때, 상위 컴포넌트에서 전달받은 콜백 함수를 호출하여 상태를 업데이트.

3. 상태가 업데이트되면 React가 하위 컴포넌트들에게 자동으로 새로운 상태를 전달하여 화면을 업데이트.

예제도 적을까 하다가 React공식문서 정확하게 나와있는 문서가 있기도 하고...너무 길기도 하고..ㅎㅎ