Quiz 2: event & state

1. React로 작업 시 이벤트를 수신하지 않는 방법은?
   : 수동으로 이벤트리스너(ex. addEventListner)를 추가하는 것.
   이는 명령형 코드이기에 해당 코드로는 React 기능을 사용하지 않으며, React 컴포넌트 외부에 있는 일부 함수를 트리거하므로 React 컴포넌트 상태와 상호 작용할 수 없다.

2. onClick과 같은 이벤트 리스너 프로퍼티에는 어떤 값을 전달해야 하나?
   : 이벤트가 발생했을 떄 실행해야 하는 함수의 포인터.
   실행될 함수의 “포인터”를 onClick 등의 값으로 전달해야 한다. 그러면 이벤트가 발생했을 때 “사용자를 대신하여” React가 함수를 실행한다.

3. 어떻게 하면 컴포넌트 중 하나에서 부모 컴포넌트, 즉 상위 수준으로 통신할 수 있나요?
   : 프로퍼티를 통해 함수를 받아들이고, 이를 하위 수준(자식) 컴포넌트 내부로부터 호출하고 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거할 수 있다.
   JavaScript에서 함수는 단순한 객체(일반 값)이므로 프로퍼티를 통해 값을 컴포넌트에 전달할 수 있다. 그리고 컴포넌트가 해당 함수를 호출하면 함수가 실행된다. 이런 식으로 부모 컴포넌트에 정의된 함수를 자식 컴포넌트 내부에서 트리거할 수 있다.

4. 컴포넌트가 화면에 표시하는 내용은 어떻게 변경할 수 있나?
   : useState를 통해 "state"값을 생성해 JSX에서 변경 및 출력한다.

5. 변경 및 사용에 일반 JS 변수 대신 추가적인 “state” 개념이 필요한 이유는 무엇인가요?
   : 표준 JS 변수는 React 컴포넌트를 재평가하지 않기 떄문이다.
   React는 일부 변숫값의 변경 여부에 별 관심이 없다. 컴포넌트 함수를 재평가하지도 않는다. 등록된 state 값(useState를 통해 생성)이 변경되었을 때만 재평가가 이루어진다.
   과 옳지 않은 것 고르기

6. useState에 관한 설명

   1. 인수로 (선택적)초기 state 값을 받는다.
   2. 정확히 두 요소로 이루어진 배열을 반환한다.
   3. useState를 다시 호출하면 새로운 state 생성된다.

7. useState로 생성된 컴포넌트 state 어떻게 업데이트할 수 있나?
   : useState도 반환하는 state 업데이트 함수를 호출한다.
   useState는 정확히 두 요소로 이루어진 배열을 반환한다. 두 번째 요소는 언제나 state 새 값을 설정하기 위해 호출하는 함수다. 해당 함수를 호출하면 React가 컴포넌트를 재평가하도록 트리거한다.

8. 하나의 단일 컴포넌트로 얼마나 많은 state를 관리할 수 있나?
   : 개수에 제한이 없다.

9. 이 코드 조각에 문제가 있나?

const [counter, setCounter] = useState(1);
...
setCounter(counter + 1);

: 이전 state에 의존하는 state를 업데이트한다면, state 업데이트 함수의 "함수 양식"을 대신 사용해야 한다.