🔸 React
- React의 라이프 사이클이 필요한 이유는 무엇인가?
: 궁극적으로 React의 성능 최적화와 React가 컨트롤 할 수 없는 사이드 이펙트의 처리를 위해
- React의 라이프 사이클 단계는 몇 단계로 분류되고, 각 단계의 특징은 무엇인가?
: render 메서드가 실행되기 전까지의 Render 단계와 render 메서드가 실행된 이후의 Commit 단계로 구분할 수 있음
: Render 단계는 React가 생성하는 가상 DOM과 관련된 단계로, React 시스텡메 의해 중단되거나 재시작될 수 있음
: Commit 단계는 더 이상 가상 DOM의 단계를 떠나서 실제 DOM과 직결된 단계로, 이 단계에서는 실제 DOM에 접근할 수 있음
- React에서 렌더링을 발생시키는 조건 3가지는 무엇인가?
: props가 변경되거나,
setState메서드가 호출되어 state가 변경되거나,forceUpdate메서드로 강제로 렌더링을 발생시키는 경우가 있음
- React에서 클래스 컴포넌트에서 자주 사용되는 라이프 사이클 메서드에는 무엇이 있고, 각각 어떤 특징이 있는가?
: 실제 DOM에 React Element가 최초로 삽입된 후 1회만 호출되는
componentDidMount
: 실제 DOM에 React Element가 최초로 삽입된 후에는 호출되지 않지만, 실제 DOM이 업데이트 될 때마다 호출되는componentDidUpdate
: 상위 컴포넌트에서 조건부 렌더링으로 하위 컴포넌트를 제거하는 경우, 제거 예정 시점에 실행되는componentWillUnmount
- 클래스 컴포넌트에서 상태에 따라 하위 컴포넌트를 어떻게 조건부 렌더링할 수 있는가?
:
constructor안에this.state로 상태를 정의하고, 그 상태에 따라 조건부 렌더링
: 클래스 필드state로 상태를 정의하고, 그 상태에 따라 조건부 렌더링
- 클래스 컴포넌트에서 이벤트 핸들러의 콜백 함수를 생성할 때 주의할 점은 무엇인가?
: ES6 메서드 방식으로 인스턴스 메서드를 정의하는 경우 메서드 내부에서 사용하는
this가 인스턴스를 가리키지 못하는 문제가 발생함
- 클래스 컴포넌트의 인스턴스 메서드에서 발생하는
this문제의 원인은 무엇이고, 어떻게 해결할 수 있는가?: 아직 생성되지 않은 가상 DOM의 요소를
this가 가리킬 수 없기 때문에undefined를 가리키게 됨
: 이를 해결하기 위해서bind메서드를 사용하여this가 인스턴스를 가리킬 수 있도록 하거나, 화살표 함수를 사용하여this를 정적으로 바인딩하는 방법이 있음
- 클래스 컴포넌트의 render 메서드가 실행되면 실제 DOM에 반환한 Element가 반영되는가?
: 그렇지 않음, 실제 DOM에 반영되는 시점은 React DOM 및 refs가 업데이트된 후임
: 즉 render가 실행되는 시점에는 Element를 반환하는 것뿐이므로 실제 화면에 렌더링되기까지 약간의 시간이 더 소요됨
- 클래스 컴포넌트의 render 메서드 실행 시점과 실제 DOM에 반영되는 시점의 차이로 발생할 수 있는 문제는 무엇이고, 이를 어떻게 해결할 수 있는가?
: 실제 렌더링까지 시간 차이가 있기 때문에 사용자의 입력이 빠르게 많이 들어오는 경우 UI 렌더링이 매끄럽게 동작하지 않는 문제가 발생할 수 있음
: 이를 해결하기 위해getSnapshotBeforeUpdate메서드를 사용할 수 있음
getSnapshotBeforUpdate메서드는 무엇이고, 왜 사용하는가?
: React DOM 및 refs를 업데이트 하는 시점에서 리플로우, 리페인팅이 발생하므로 바로 그 이전에 snapshot을 반환하는 메서드
:componentDidUpdate메서드와 함께 사용하여 반환한 snapshot을 토대로 UI 렌더링을 매끄럽게 구현할 때 사용
getDerivedStateFromProps메서드는 무엇이고, 왜 사용하는가?: render 메서드와 마찬가지로 컴포넌트 생성, 업데이트 시점에 항상 실행됨
: props로 전달된 상태 및 속성을 가져와서 state, 즉 파생 상태를 업데이트 할 때 사용함
: 그러나 사용하기 불편해서 요즘에는 고유한key값을 지정하고 이를 변경함으로써 파생 상태를 생성하는 경우가 보편적임
shouldComponentUpdate메서드는 무엇이고, 왜 사용하는가?: 컴포넌트의 업데이트 예정 시점에 불리언 값을 반환하여 컴포넌트 렌더링 여부를 결정할 때 사용
: 사용자와의 상호작용이 빠르고 많이 일어나는 경우 불필요한 렌더링을 방지함으로써 성능을 최적화할 때 사용
: 만약 props가 동일하다면 조건 처리로false를 반환하여 컴포넌트를 리렌더링하지 않을 수 있음
- 함수 컴포넌트에서는 라이프 사이클 메서드를 사용할 수 없는가?
: 클래스 컴포넌트에서 사용할 수 있는 대부분의 라이프 사이클 메서드를 흉내내서 사용할 수 있음
- 클래스 컴포넌트에서만 사용할 수 있는 라이프 사이클 메서드에는 무엇이 있는가?
: 에러 처리와 관련된 라이프 사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있음
: 대표적으로getDerivedStateFromError,componentDidCatch가 있음
getDerivedStateFromError메서드는 무엇이고, 왜 사용하는가?: 하위 컴포넌트들을 감싸는 상위 컴포넌트에서 사용할 수 있음
: 만약 하위 컴포넌트에서 에러가 발생하면 이를 캐치해서 에러 정보를 파생 상태로 생성할 수 있음
: 생성한 에러의 파생 상태를 토대로 에러를 핸들링하는 로직을 작성할 수 있음
componentDidCatch메서드는 무엇이고, 왜 사용하는가?: 기존
try ... catch구문의catch에 해당하는 메서드
:getDerivedStateFromError메서드와 동일하게 하위 컴포넌트에서 에러가 발생한 경우 이를 캐치할 수 있고, 에러에 대한 자세한 정보(errorInfo)를 제공 받을 수 있음
- 클래스 컴포넌트의 라이프 사이클 메서드 중
static으로 정의해야 하는 것은 무엇인가?:
getDerivedStateFromProps,getDerivedStateFromError가 해당됨
: 두 메서드 모두 파생 상태를 생성는데, 인스턴스 메서드로 정의하면 정상적으로 파생 상태를 생성할 수 없음
- React에서 리스트를 렌더링할 때
key값을 지정해야 하는 이유는 무엇인가?: 비교 알고리즘을 통해 효율적으로 렌더링하기 위해
key값이 필요함
: 특히 배열의 index 보다 고유한 값을key로 설정해야 함, 만약 배열의 index를key값으로 설정하는 경우 예기치 못한 렌더링 이슈가 발생할 수도 있음
🔸 Jest
- 반복되는 테스트 코드를 효율적으로 작성하기 위해서 어떻게 해야 하는가?
: 따로 테스트를 위한 유틸리티 함수를 작성하여 반복되는 테스트 코드를 처리할 수 있지만, 이 경우에
test.only등의 메서드를 사용할 수 없음
: 이를 해결하기 위해jest-in-case패키지의cases메서드를 사용하여 반복되는 테스트 코드를 좀 더 쉽게 처리할 수 있음
jest-in-case의cases메서드 사용 시 테스트 케이스를 어떻게 전달할 수 있는가?: 테스트 케이스는 객체로도 배열로도 전달 할 수 있음
: 테스트 케이스를 객체로 전달하는 경우 테스트 이름은 객체의 프로퍼티 키 이름으로 설정할 수 있음
: 테스트 케이스를 배열로 전달하는 경우 테스트 이름은name프로퍼티를 따로 작성하여 설정할 수 있음
