[React] 클라이언트 Ajax 요청 종합퀴즈

React 데이터 흐름에 대한 설명으로 옳은 것을 모두 고르세요. (정답 두 개)

A.서로 다른 두 컴포넌트에 하나의 상태가 영향을 준다면, 두 컴포넌트 상위에 상태를 공유하는 컴포넌트가 존재해야 한다.

B.React 앱은 페이지 단위로 시작해 하향식으로 만드는 것이 좋다.

C.React의 데이터는 하향식으로 흐르며, props로 전달한다.

D.React는 state를 이용해 하위 컴포넌트로 데이터를 전달할 수 있다.

정답A. 상태가 하나의 컴포넌트에만 영향을 준다면 그 컴포넌트에만 위치해도 됩니다. 하지만 두 컴포넌트가 하나의 상태로부터 영향을 받는다면 두 컴포넌트 상위에 상태를 공유하는 컴포넌트가 존재하는 것이 좋습니다. 단방향 데이터 흐름을 유지하고, 같은 상태를 공유할 수 있는 바람직한 방법이기 때문입니다.

B. React 앱은 컴포넌트 단위로 시작해서 상향식으로 만드는 것이 좋습니다. 상향식으로 앱을 제작하면 테스트가 쉽고 확장성이 좋아진다는 장점을 가집니다. React 앱을 제작하려면, 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일입니다.

정답 C, D. React 데이터는 state가 아닌 props를 통해 하위 컴포넌트로 전달 가능합니다. 반대로 다시 위로 전달할 수는 없습니다.

D.React는 state를 이용해 하위 컴포넌트로 데이터를 전달할 수 있다.

---

순수 함수에 대한 설명으로 옳지 않은 것을 고르세요.

A. 순수 함수는 Side Effect가 없는 함수를 말한다.

B. Math.sqrt(x)는 순수 함수이다.

C. 순수 함수는 외부 상태를 바꿀 수 없는 함수이다.

D. 함수 내에서 Ajax 요청을 해도 함수의 결과에는 영향이 없으므로 해당 함수는 순수 함수이다.

A. 순수 함수는 Side Effect가 없는 함수를 말한다.

B. Math.sqrt(x)는 전달 인자 x의 제곱근 값을 구하는 메서드입니다. 주어진 인자에 대해 항상 동일한 결과값을 리턴하므로 순수 함수입니다.

C. 순수 함수는 외부 상태를 바꿀 수 없는 함수이다.

정답 D. 순수 함수는 A 보기와 같이 Side Effect를 만들지 않는 함수입니다. Ajax 요청은 외부 상태를 바꾸기 때문에 해당 기능을 가진 함수는 순수 함수가 아닙니다.

---

Effect hook에 대한 설명으로 옳지 않은 것을 고르세요.

A. 일반적으로 반복문, 조건문 내부에서도 사용한다.

B. 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 hook이다.

C. React 함수 내에서만 호출해야 한다.

D. useEffect의 첫 번째 인자는 함수이다.

정답 A. 일반적으로 반복문, 조건문 내부에서도 사용한다.
A. Hook의 규칙에 위배됩니다. React Hook은 최상위에서만 호출해야 합니다. 그래야만 컴포넌트가 렌더링 될 때마다 항상 동일한 순서의 Hook 호출이 보장됩니다. 만약 반복문 또는 조건문 내부에서 Hook을 사용하게 되면, React가 올바르게 각 Hook의 상태를 유지할 수 없게 됩니다. 자세한 설명은 리액트 공식 문서 Hook의 규칙 하단 설명 란을 참고하세요.

B. 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 hook이다.

C. React 함수 내에서만 호출해야 한다.

D. useEffect의 첫 번째 인자는 함수이다.

---

빈 칸이 알맞게 채워진 답을 고르세요

import React, { useState } from "react";

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

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

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent 1._____________ />
    </div>
  );
}

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

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

A.1.handleChangeValue, 2.{handleChangeValue}, 3.handleChangeValue()

B.1.handleChangeValue(), 2.{handleChangeValue}, 3.handleChangeValue

C.1.handleBtnClick={handleChangeValue}, 2.handleBtnClick(), 3.{handleBtnClick}

D. 1.handleBtnClick={handleChangeValue}, 2.{handleBtnClick}, 3.handleBtnClick()

A.1.handleChangeValue, 2.{handleChangeValue}, 3.handleChangeValue()

B.1.handleChangeValue(), 2.{handleChangeValue}, 3.handleChangeValue

C.1.handleBtnClick={handleChangeValue}, 2.handleBtnClick(), 3.{handleBtnClick}

정답 D.1.handleBtnClick={handleChangeValue}, 2.{handleBtnClick}, 3.handleBtnClick()

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

---

빈 칸이 알맞게 채워진 답을 고르세요.

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

	useEffect(() => {
		console.log("나는 업데이트가 될 때마다 작동해")
	}1.___)

	useEffect(() => {
		console.log("나는 처음만 작동해")
	}2.___)

	useEffect(() => {
		console.log("나는 keyword가 바뀔 때마다 작동해")
	}3.___)

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

A. 1. [keyword], 2. [], 3.x

B. 1. x, 2.{keyword}, 3. {}

C. 1. x, 2. [] 3.[keyword]

D. 1. x, 2.{}, 3. {keyword}

1. 아무것도 안 들어가 있을 때는 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때마다 실행됩니다.
2. 빈 배열일 때는 컴포넌트가 처음 생성될 때만 함수가 실행됩니다.
3. keyword가 업데이트 될 때마다 실행됩니다.
   
   정답  C. 1. x, 2. [] 3.[keyword]

---

다음 중 빈 칸에 들어갈 코드로 옳은 것을 고르세요.

아래 Main 컴포넌트의 첫 화면은 로딩 화면은 따로 없이 항공편 리스트를 보여줍니다. 항공편 검색 시에 로딩 상태를 보여주고, 검색이 완료되면 그에 맞는 항공편 리스트가 보이도록 구현합니다.

import LoadingIndicator from './component/LoadingIndicator'

export default function Main() {
  1._________________ // loading useState를 만들어 주세요
	//생략, condition State와 flightList State는 구현했음을 가정합니다.

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

//생략, search 컴포넌트와 flightList 컴포넌트는 구현했음을 가정합니다.
  return (
    <div>
      <main>
        <div className="table">
          4._________________ // 삼항연산자를 이용하세요
        </div>
      </main>
    </div>
  )
}

A.

1. const [isLoading, setIsLoading] = useState(false)
2. setIsLoading(false)
3. setIsLoading(false)
4. {isLoading ? <div>로딩 완료 화면</div> : <LoadingIndicator />}

B.

1. const [isLoading, setIsLoading] = useState(true)
2. setIsLoading(true)
3. setIsLoading(true)
4. {isLoading ? <div>로딩 완료 화면</div> : <LoadingIndicator />}

C.

1. const [isLoading, setIsLoading] = useState(false)
2. setIsLoading(true)
3. setIsLoading(false)
4. {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

D.

1. const [isLoading, setIsLoading] = useState(false)
2. setIsLoading(false)
3. setIsLoading(true)
4. {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

정답  C.
1. const [isLoading, setIsLoading] = useState(false)
2. setIsLoading(true)
3. setIsLoading(false)
4. {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

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

---

상태 끌어올리기에 대한 설명으로 옳지 않은 것을 고르세요.

A.단방향 데이터 흐름 원칙에 부합하기 위한 개념이다.

B.동일한 데이터를 여러 컴포넌트에 반영하고 싶다면 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다.

C.하위 컴포넌트에서 정의된 state를 상위 컴포넌트로 전달하는 것을 말한다.

D.State 변경 함수를 내려받아 해당 함수를 하위 컴포넌트에서 실행시키는 방식이다.

A.단방향 데이터 흐름 원칙에 부합하기 위한 개념이다.

B.동일한 데이터를 여러 컴포넌트에 반영하고 싶다면 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다.

정답  C.하위 컴포넌트에서 정의된 state를 상위 컴포넌트로 전달하는 것을 말한다.
상위 컴포넌트에서 정의된 state 갱신 함수를 하위 컴포넌트로 전달하여 호출합니다. 이 보기는 완전히 틀린 보기입니다. 리액트는 일반적으로 하위 컴포넌트에서 정의된 state를 상위로 전달하지 않습니다.

D.State 변경 함수를 내려받아 해당 함수를 하위 컴포넌트에서 실행시키는 방식이다.

---

React에 대한 설명으로 옳지 않은 것을 모두 고르세요. (정답 두 개)

A.컴포넌트는 React의 가장 작은 단위이다.

B.JSX에서 JavaScript 표현식을 사용하기 위해서는 중괄호({})로 씌워주어야 한다.

C.어느 한 컴포넌트는 다른 컴포넌트에 속할 수 있으며, props를 통해 정보를 주고받는다.

D.map 함수의 key prop을 지정할 때에는 일반적으로 Math.random() 메서드를 사용한다.

정답 A. React 앱의 가장 작은 단위는 엘리먼트입니다. 컴포넌트는 이러한 여러 엘리먼트와 함수들이 모여 있는 기능적 단위라고 할 수 있습니다.

B.JSX에서 JavaScript 표현식을 사용하기 위해서는 중괄호({})로 씌워주어야 한다.

C. 컴포넌트도 하나의 엘리먼트입니다. 이러한 엘리먼트들은 각각이 서로를 포함할 수도 있습니다. 그리고 컴포넌트는 props 형태로 속성을 내려 받아 인자로 사용할 수가 있습니다.

정답 D. map 함수로 배열 형태로 저장된 여러 엘리먼트들을 렌더링하는 경우가 많습니다. 이 때, 각각의 최상위 엘리먼트들에 key prop이 요구됩니다. 이는 React가 해당 엘리먼트들의 변경 사항을 알아채기 쉽게 돕기 위함입니다. Math.random()을 사용하게 되면 key가 예상 불가능하며, 시시각각 변화하게 됩니다. 그렇게 되면 React는 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 리렌더링하고, 이에 따라 성능 이슈가 발생하거나 자식 컴포넌트의 state가 유실될 수 있습니다.