종합퀴즈

5번

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent 1️⃣{handleBtnClick={handleChangeValue} />
    </div>
  );
}

function ChildComponent(2️⃣{handleBtnClick} ) {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
		3️⃣handleBtnClick() 
  };

  return <button onClick={handleClick}>값 변경</button>;
}

단방향 데이터 흐름이라는 원칙에 따라, 우리는 부모 컴포넌트에서 자식 컴포넌트로 “상태를 변경하는 함수” 그 자체를 하위 컴포넌트에 전달하고 이 함수를 하위 컴포넌트가 실행해야 합니다. 따라서
1번에는 handleChangeValue() 함수를 변수에 담아서 하위 컴포넌트에 보내줘야 합니다. 그 후 하위 컴포넌트에서는 함수를 설정한 변수명으로 받아야 하기 때문에 2번에는 {handleBtnClick} 로 받아와 줘야 합니다. 마지막으로 받아온 함수를 실행하기 위해 3번은 handleBtnClick() 이 됩니다.

6번

function App() {
	const [keyword, setKeyword] = userState("");
	const onChange = (event) => seyKeyword(event.target.value);

	useEffect(() => {
		console.log("나는 업데이트가 될 때마다 작동해")
	}, 1️⃣x) //아무것도 안 들어가 있을 때는 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때마다 실행됩니다.

	useEffect(() => {
		console.log("나는 처음만 작동해")
	}, 2️⃣[]) //빈 배열일 때는 컴포넌트가 처음 생성될 때만 함수가 실행됩니다.


	useEffect(() => {
		console.log("나는 keyword가 바뀔 때마다 작동해")
	}, 3️⃣[keyword]) //keyword가 업데이트 될 때마다 실행됩니다.


	return (
		<div>
			<input
				value={keyword}
				onChange={onChange}
				type="text"
				placeholder="검색창..."
			/>
		</div>
	)
}

7번

import LoadingIndicator from './component/LoadingIndicator'

export default function Main() {
  1️⃣const [isLoading, setIsLoading] = useState(false) // loading useState를 만들어 주세요
	//생략, condition State와 flightList State는 구현했음을 가정합니다.

  useEffect(() => {
    2️⃣setIsLoading(true) // 갱신함수를 실행시켜 주세요
		fetch(`http://서버주소/flight?q=${condition}`)
    .then(resp => resp.json())
    .then(result => {
			setFlightList(result)
      3️⃣setIsLoading(false) ;
    });
  }, [condition]) 

//생략, search 컴포넌트와 flightList 컴포넌트는 구현했음을 가정합니다.
  return (
    <div>
      <main>
        <div className="table">
          4️⃣{isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>} // 삼항연산자를 이용하세요
        </div>
      </main>
    </div>
  )
}

첫 화면에서는 로딩 화면 없이 항공편 리스트가 보여져야 하므로 isLoading의 초깃값이 false여야 합니다.
데이터를 받기전 isLoading을 true로 바꿔주어 로딩 화면(Loading indicator)을 보여주고, 데이터를 다 받으면 isLoading이 false가 되며 로딩 완료 화면이 나오게 됩니다.