React Quiz - React Component, Props, State, Side Effect, Lifecyle, Hook

1. Is React library? or framework?

• React는 user interface(UI)를 만들기하기 위한 JavaScript 라이브러리입니다.

1.1 library와 framework의 차이점에 대해 얘기해주세요.

• library는 필요할 시점에 필요한 기능을 사용할 수 있는 반면에, framework는 정해진 규칙대로 코드를 짜야한다는 제약이 있습니다.

1.2 React에서 UI를 만드는 단계에 대해 설명해주세요.

1. render를 호출합니다.
2. 컴포넌트를 렌더링합니다. (컴포넌트 함수를 호출하여 컴포넌트를 생성합니다.)
3. 렌더링한 결과값을 대응하는 DOM node에 반영합니다.

2. React를 선택한 이유에 대해서 설명해주세요.

1. React는 화면을 컴포넌트 단위로 나누어서 구성하므로, 기능별로 컴포넌트를 나누어서 관리하기 쉽고 재사용성이 높습니다.
2. React는 Virtual DOM을 사용하여 DOM 업데이트를 하므로, DOM 처리 회수를 최소화하여 업데이트 속도가 빠릅니다.
3. React 커뮤니티가 크고, React와 관련된 다양한 라이브러리를 사용할 수 있습니다.
4. React Native를 사용하여 앱 개발을 할 수 있습니다.

3. 데이터가 변경되었을 때 React가 UI를 업데이트하는 과정을 Virtual DOM과 연관지어서 설명해주세요.

• 데이터가 변경되었을 때, 전체 UI를 Virtual DOM에 리렌더링합니다.
• Virtual DOM과 이전 DOM을 비교하여, 바뀐 부분만 실제 DOM에 커밋합니다.

4. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이점에 대해서 얘기해주세요.

	클래스 컴포넌트	함수 컴포넌트
state 초기화	constructor 함수 내부에서 초기화함	useState hook을 사용해 초기화함
코드 길이	비교적 김	비교적 짧음
컴포넌트 반환	render 함수를 사용하여 컴포넌트를 반환함	return 문을 사용하여 컴포넌트를 반환함

4.1 함수형 컴포넌트라고 부르지 않고 함수 컴포넌트라고 부르는 이유는 무엇인가요?

• 함수형 프로그래밍과 함수형 컴포넌트가 혼동될 수 있기 때문에 함수 컴포넌트라고 부릅니다.
• 함수형 프로그래밍에서는 순수 함수를 지향하는데, 함수 컴포넌트 내에서 부수효과가 있을 수 있기 때문에 순수 함수라고 보기 어렵습니다.

4.1.1 순수 함수는 무엇입니까?

• 같은 인풋을 넣었을 때, 동일한 아웃풋이 나오는 함수를 말합니다.
• 함수 외부에 부수효과를 일으키지 않는 함수를 말합니다.

4.2 함수 컴포넌트와 클래스 컴포넌트를 사용한 경험에 대해서 얘기해주세요.

• 저는 컴포넌트를 만들 때 주로 함수 컴포넌트를 사용하고, 에러 바운더리를 만들 때 클래스 컴포넌트를 사용합니다.

4.2.1 주로 함수 컴포넌트를 사용하시는 이유가 있으신가요?

• 함수 컴포넌트를 사용할 경우 코드의 양이 비교적 줄어들고, 훅을 사용하여 상태 관련 로직을 분리하고 재활용할 수 있어서 함수 컴포넌트를 주로 사용합니다.

5. props와 state의 차이에 대해 설명해주세요.

• React에서는 props를 사용하여 컴포넌트끼리 소통하고, state를 사용하여 컴포넌트의 내부 상태를 정의합니다.
• props는 부모 컴포넌트에서 설정하고, state는 컴포넌트에서 설정합니다.

5.1 자식 컴포넌트에서 props를 변경할 수 있는 방법에 대해서 얘기해주세요.

• 자식 컴포넌트에서 부모 컴포넌트의 props에 대한 set 함수를 전달 받아서, set 함수를 호출하여 props를 변경할 수 있습니다.

6. flux에 대해서 설명해주세요.

• flux는 단방향 데이터 흐름을 제어하는 패턴을 말합니다.

6.1 flux의 데이터 흐름에 대해서 설명해주세요.

• 사용자의 행동에 따라 action이 발생하고, action에 대한 dispatch가 실행됩니다.
• dispatch는 store를 업데이트합니다.
• 업데이트한 store에 대한 view를 리렌더링합니다.

6.2 flux 패턴을 사용한 경험에 대해서 얘기해주세요.

• 데이터를 가져오는 비동기 처리할 때, 성공했을 때와 실패했을 때의 action을 정의하고 useReducer 훅을 사용하여 각각 action에 대한 dispatch를 호출했습니다.

6.2.1 flux 패턴을 사용했을 때 느낀 장점에 대해서 설명해주세요.

• 데이터 비동기 처리 관련 로직은 useReducer에서 처리하므로, 데이터 처리 결과를 컴포넌트에 적용하면 되서 코드의 양을 줄이고 가독성을 높일 수 있었습니다.

7. Redux에 대해서 아시나요?

• Redux는 상태 관리 라이브러리입니다.
  • store를 사용하여 전역으로 상태를 관리합니다.
  • 전역으로 상태를 관리하기 때문에 props drilling을 피할 수 있습니다.

7.1 Redux의 기본 원칙에 대해서 설명해주세요.

1. 애플리케이션의 전역 상태는 단일 저장소 내의 트리에 저장됩니다.
2. state는 읽기 전용입니다.
3. state는 순수 함수에 의해 변경되어야 합니다.

7.2 어떻게 전역 상태를 관리하나요?

• 저는 recoil을 사용하여 클라이언트 전역 상태를 관리합니다. react-query를 사용하여 서버 전역 상태를 관리합니다.

7.2.1 왜 그렇게 전역 상태를 관리하시는지 얘기해주세요.

• recoil는 boilerplate-free 가볍고, atom에서 selector를 거쳐서 컴포넌트에 전달되는 비교적 쉬운 상태 구조를 가지고 있기 때문에 사용하였습니다.
• react-query는 서버 상태를 캐쉬하고 업데이트하기 쉬워서 사용하였습니다.

8. React에서 state의 immutable을 유지하라는 말이 무엇을 뜻하는지 얘기해주세요.

• React에서 상태를 변경할 때, 이전 상태가 변경되는 것이 아니라 새로운 상태로 대체됩니다.
• 상태로 원시값(primitive value)과 참조값(referecne value) 모두 사용할 수 있습니다.
  • 상태가 참조값(객체, 배열 등)일 경우, spread 연산자나 immer 라이브러리를 사용하여 이전 상태을 복사해서 새로운 상태을 만듭니다.

8.1 spread 연산자로 복사할 수 없는 중첩된 객체를 복사하는 방법에 대해 얘기해주세요.

• JSON.stingfy를 사용하여 객체를 문자열로 바꾸고, JSON.parse를 사용하여 문자열을 객체로 되돌리는 방법을 사용하여 중첩된 객체를 복사할 수 있습니다.
• immer 라이브러리를 사용하여 중첩된 객체를 복사할 수 있습니다.
• window.structedClone()을 사용하여 structured-cloneable type을 복사할 수 있습니다.

9 React에서 부수효과는 어디서 발생하나요?

• event handler에서 부수 효과가 일어납니다.
• useEffect hook에서 부수 효과가 일어납니다.

9.1 React에서 부수 효과를 어떻게 방지하나요?

• 함수 컴포넌트가 순수해야 합니다.
  • 렌더링 전에 다른 객체나 값을 변경하지 않아야 합니다.
  • 같은 입력값에 대해 같은 JSX를 반환해야 합니다.
  • 컴포넌트들은 서로의 렌더링 결과값에 의존하지 않아야 합니다.
  • 렌더링을 위해 사용되는 인풋값을 변경하지 않고 set 함수를 사용하여 새로운 값으로 대체되어야 합니다.
  • event handler에서 값을 변경할 경우, useEffect를 사용합니다.

10. 컴포넌트의 lifecycle에 대해 설명해주세요.

• 컴포넌트가 화면에 추가될 때 마운트됩니다.
• 컴포넌트가 새로운 props나 state를 받을 때 업데이트됩니다.
• 컴포넌트가 화면에서 제거될 때 언마운트됩니다.

10.1 컴포넌트의 lifecyle과 연관지어서 클래스 컴포넌트의 lifecycle method에 대해 설명해주세요.

• 컴포넌트가 마운트되었을 때, componentDidMount 메서드가 호출됩니다.
• 컴포넌트가 리렌더링될 때, componentDidUpdate 메서드가 호출됩니다.
• 컴포넌트가 언마운트될 때, componetWillUnmount 메서드가 실행됩니다.

10.2 클래스 컴포넌트의 lifecycle method는 함수 컴포넌트에서 어떻게 대체되나요?

• 컴포넌트가 마운트되거나 리렌더링될 떄, useEffect의 setup 함수가 실행됩니다.
• 컴포넌트가 언마운트될 때, useEffect의 setup 함수에서 반환되는 cleanup 함수가 실행됩니다.

11 다음 Hook에 대해 설명해주세요.

11.1 useState

• state 변수를 컴포넌트에 추가해주는 hook입니다.
• state의 초기값을 매개변수로 받습니다.
• state 변수와 state 변수를 변경하는 set 함수를 담은 배열을 반환합니다.

11.2 useEffect

• 컴포넌트를 외부 시스템(API, third-party widgets, network 등)동기화하기 위해 사용되는 hook입니다.
• 컴포넌트가 렌더링 된 이후에 effect가 실행됩니다.
• 첫 번째 매개변수로 effect 로직이 담긴 setup함수를 받습니다.
• 두 번째 매개변수는 선택적으로 setup 함수 내에서 참조되는 모든 반응형(reactive) 값들의 배열 dependencies가 들어갑니다.

11.3 useReducer

• 컴포넌트의 다양한 상황에 따라 상태를 다양하게 업데이트하길 원할 때 사용하는 훅입니다.
• 첫번째 매개변수로 상태가 어떻게 업데이트되는지 명시하는 reducer 함수를 받습니다.
  • reducer 함수는 현재 상태와 액션 값을 전달받아서 새로운 상태를 반환합니다.
  • reducer 함수는 순수 함수여야 합니다(=state가 불변성을 유지해야합니다)
• 두번째 매개변수로 init 함수에 들어갈 매개변수 또는 초기값을 받습니다.
• 세번째 매개변수로 초기값을 계산하는 init 함수를 받습니다.
  • init 함수가 명시되어 있지 않을 경우, 두번째 매개변수를 초기값으로 설정합니다.

11.4 useMemo

• 리렌더링 사이에 계산 결과값을 캐쉬해주는 훅입니다.
  • 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.
• 첫 번째 매개변수로 캐쉬하길 원하는 calculateValue 함수를 받습니다.
  • calculateValue 함수는 순수함수여야 합니다.
• 두 번째 매개변수로 calculateValue 함수의 모든 반응형 변수들의 배열 dependencies를 받습니다.
• 첫 렌더링 때 반환값
  • calculateValue의 결과값을 반환합니다.
• 이후 렌더링 때 반환값
  • dependencies가 바뀌지 않으면, 마지막 렌더링에서 저장된 값을 반환합니다.
  • dependencies가 바뀌면, calculateValue를 다시 호출하고 그 결과값을 반환합니다.

11.5 useCallback

• 리렌더링 사이에 함수 정의를 캐쉬해주는 훅입니다.
• 첫 번째 매개변수로 캐쉬하길 원하는 fn 함수를 받습니다.
• 두 번째 매개변수로 fn 함수의 반응형 값들의 배열을 받습니다.
• 첫 렌더링 시 반환값
  • 첫 번째 매개변수로 받은 fn 함수를 반환합니다.
• 이후 렌더링시 반환값
  • dependencies가 바뀌지 않으면, 마지막 렌더링에서 저장된 함수를 반환합니다.
  • dependencies가 바뀌면, 현재 렌더링에서 전달받은 함수를 반환합니다.

11.6 useRef

• 렌더링할 때 필요하지 않은 값을 참조하는 훅입니다.
  • DOM을 조작할 때 사용합니다.
  • 매개변수로 ref 객체의 current 프로퍼티의 초기값을 받습니다.
  • ref 객체를 반환합니다.
    • current 프로퍼티의 초기값은 매개변수로 전달 받은 값입니다.
    • JSX 노드에 ref 속성으로 ref 객체를 전달하면, React가 current 프로퍼티로 설정합니다.
    • ref 객체의 current 프로퍼티를 변경해도, 컴포넌트가 리렌더링되지 않습니다.

11.7 useCallback을 사용하여 함수를 선언할 때와 사용하지 않고 함수를 선언할 때의 차이점에 대해 설명해주세요.

• useCallback을 사용하여 함수를 선언한 경우, 함수를 메모이제이션하여 사용합니다.
• useCallback을 사용하지 않고 함수를 선언한 경우, 렌더링을 할 때 마다 함수가 새롭게 선언됩니다.
• 함수를 선언할 때 비용이 많이 드는 경우 useCallback과 같이 사용하고, 그렇지 않을 경우 useCallback을 사용할 필요가 없습니다.

11.8 useMemo와 useCallback의 차이에 대해 설명해주세요.

• useMemo 함수는 메모이제이션된 값을 반환하는 반면에, useCallback 함수는 메모이제이션 된 함수를 반환합니다.

11.9 useState와 useRef를 각각 어떤 상황에서 사용하는지 설명해주세요.

• useState는 값이 변할 때 컴포넌트가 리렌더링해야 하는 값을 저장할 때 사용합니다.
• useRef는 값이 변해도 컴포넌트가 리렌더링하면 안되는 값을 저장할 때 사용합니다.

11.10 useState와 useReducer의 차이에 대해 설명해주세요.

• useState는 상태 업데이트가 단순할 때 사용하고, useReducer는 상태 업데이트가 복잡할 때 사용합니다.
• useRecuder는 reducer function를 작성하고 action을 dispatch해야하므로 코드가 복잡한 반면에, useState는 set 함수에서 새로운 상태를 받아서 업데이트하므로 코드가 덜 복잡합니다.

11.1 memo와 useMemo의 차이에 대해 설명해주세요.

• memo는 컴포넌트의 props가 변하지 않았을 때, 컴포넌트의 리렌더링을 건너뛰게 하는 API입니다.
• useMemo는 리렌더링 사이에 연산 결과값을 캐쉬할 때 사용하는 훅입니다.