Quizs - 제어 컴포넌트, useEffect, props drilling, HTTP method
1. 제어 컴포넌트와 비제어 컴포넌트에 대해 설명해주세요.
- value props를 전달받아서 React에 의해 제어되는 input 컴포넌트를 제어 컴포넌트라고 합니다.
- React는 제어 컴포넌트가 항상 전달받은 value를 갖도록 강제합니다.
- value prop를 전달받지 않는 전통적인 HTML form input을 비제어 컴포넌트라고 합니다.
- 비제어 컴포넌트는 DOM 그 자체에 의해 폼 데이터가 처리됩니다.
1.1 비제어 컴포넌트의 값을 얻는 방법에 대해서 설명해주세요.
- 비제어 컴포넌트의 ref 속성에 useRef 훅의 반환값을 전달하여, DOM Node의 현재 값에 접근할 수 있게 합니다.
2. Inversion of control에 대해 아시나요?
- 제어의 역전은 함수의 제어를 함수가 아닌 함수 호출자에게 넘기는 것입니다.
2.1 React에는 Inversion of control이 어떤식으로 적용되어 있나요?
- 합성 컴포넌트(compound components)
- 컴포넌트를 사용하는 곳에서 커스터마이징할 수 있도록 컴포넌트를 추상화합니다.
- 여러 컴포넌트들이 상태를 공유하는 경우, 공통 부모 컴포넌트에서 상태를 관리하고 자식 컴포넌트들을 합성합니다.
- render prop
- 컴포넌트를 렌더링하는 함수를 props로 전달받아서 필요할 때 함수를 호출할 수 있습니다.
3. React hook의 dependency array에 대해 자세히 설명해주세요.
- dependency array는 컴포넌트 내부에서 반응형 값들의 배열을 말합니다.
- 반응형 값들에는 props, state, 컴포넌트 내부에서 정의된 변수나 함수를 포함합니다.
- dependency array가 명시되어 있지 않다면, 리렌더링 할 때 마다 effect가 재실행합니다.
- dependency array가 빈 배열이라면, 첫 렌더링 이후에만 effect가 실행됩니다.
- dependency array가 값이 들어 있는 배열이라면, 리렌더링시 이전 dependency array의 값들과 현재 값들을 비교합니다.
- 값이 다를 경우에만 effect를 재실행합니다.
3.1 useEffect에서 dependency array를 어떻게 다루어야 버그가 발생하지 않는지 설명해주세요.
- dependency array에서 반응형 값인 props, state, 컴포넌트 내부에서 정의된 변수나 함수를 모두 포함하고 있어야 값이 변했을 때 effect가 정상적으로 재실행됩니다.
- 불필요한 리렌더링을 방지하기 위해서 함수 내부에 정의된 변수나 함수를 effect 내부에서 정의합니다.
4. 바벨에 대해서 설명해주세요.
- babel은 JavaScript compiler입니다.
- ES6 버전 이상의 코드를 오래된 브라우저 환경에서 호환될 수 있도록 바뀌어주는데 주로 사용됩니다.
4.1 polyfill에 대해 설명해주세요.
- 웹 브라우저가 기본적으로 지원하지 않는 기능을 구현하는 코드를 말합니다.
4.2 plugin과 preset에 대해 설명해주세요.
- plugin은 Babel에게 코드 변환을 실행하는 방법을 지시하는 작은 JavaScript 프로그램을 말합니다.
- preset은 미리 정해진 plugin 세트를 말합니다.
5. Rest API에 대해 아는대로 설명해주세요.
- REST API는 표준 웹 라이브러리를 사용하여 호출할 수 있는 HTTP 서비스를 의미합니다.
5.1 HTTP 메서드 GET과 HEAD는 각각 언제 사용되는지 설명해주세요.
- GET 메서드는 특정 URL의 데이터를 가져올 때 사용됩니다.
- HEAD 메서드는 특정 URL의 데이터를 가져오지 않고 Header의 값들을 읽고 싶을 때 사용합니다.
5.2 HTTP 메서드 PUT과 POST의 차이점에 대해 설명해주세요.
- PUT 메서드는 한 번 또는 여러 번 연속으로 호출해도 동일한 효과가 있는 반면에, POST 메서드는 여러 번 연속으로 호출했을 때 side effect가 있을 수 있습니다.
5.3 HTTP 메서드 PUT과 PATCH의 차이점에 대해 설명해주세요.
- PATCH 메서드는 리소스를 수정하는 방법에 대한 명령어들로 간주되는 반면에, PUT 메서드는 새로 만들어지거나 대체되는 리소스를 대표합니다.
- PUT 메서드는 멱등성을 유지해야 하지만(동일한 요청을 여러번 해도 같은 상태여야 하지만), PATCH 메서드는 꼭 그럴 필요는 없습니다.
6. 상태관리의 필요성에 대해 설명해주세요.
- React에서 상태는 오직 자식 컴포넌트에게만 전달해줄 수 있습니다. 자손 컴포넌트에게 상태를 전달해주기 위해서 중간 컴포넌트들이 계속 상태를 전달해주는 것을 props drilling이라고 합니다. 이러한 props drilling을 해결하기 위해 상태 관리 라이브러리의 사용이 필요해졌습니다.
6.1 어떻게 상태관리를 하시나요?
- 저는 클라이언트쪽 전역 상태는 recoil 라이브러리를 사용해서 관리하고, 서버쪽 상태는 react-query 라이브러리를 사용해서 관리합니다.
6.1 그렇게 상태 관리하시는 이유가 있나요?
- recoil 라이브러리는 atom과 selector를 사용한 단순한 상태구조를 갖고 있어서 이해하기 쉽고, bolierplate를 설치하지 않아 되서 가벼워서 사용했습니다.
- react-query 라이브러리는 캐싱 기능, 중복 요청 처리, 데이터 동기화 작업 등 다양한 기능을 제공해서 사용했습니다.
7. Props Drilling은 무엇인가요?
- 공통 조상 컴포넌트가 데이터를 필요로 하는 컴포넌트에서 멀리 떨어져 있을 때, 공통 조상 컴포넌트에서 데이터가 필요한 컴포넌트까지 prop로 계속 내려주어야 합니다. 이러한 상황을 props drilling이라고 합니다.
7.1 Props Drilling은 어떻게 피할 수 있나요?
- context API를 사용하여 props drilling을 피할 수 있습니다.
- 공통 조상 컴포넌트에서 createContext API를 사용하여 context를 만들고, context Provider 컴포넌트가 공통 조상 컴포넌트를 감쌉니다.
- 데이터가 필요한 컴포넌트에서 useCotext 훅을 사용하여 필요한 데이터를 받을 수 있습니다.
- recoil, redux와 같은 상태 관리 라이브러리를 사용하여 상태를 전역으로 관리할 수 있습니다.
8. package.json의 역할이 무엇인가요?
- package.json은 현재 프로젝트에서 의존하는 패키지를 다른 사람들이 쉽게 관리하고 설치할 수 있도록 해주는 파일입니다.
- package.json 파일에는 현재 프로젝트에 대한 정보와 프로젝트에서 의존하고 있는 패키지에 대한 정보가 담겨 있습니다.
8.1 dependencies와 devDependencies의 차이점이 무엇인가요?
- dependencies는 배포시 필요한 패키지들의 배열이고, devDependencies는 개발과 테스트를 위해 필요한 패키지들의 배열입니다.
8.2 package.json과 package-lock.json의 차이점이 무엇인가요?
- package.json와 package-lock.json 둘 다 프로젝트에서 의존하는 패키지에 대한 정보를 담고 있지만, package.json의 패키지 정보에는
~나 *와 같은 범위의 버젼을 명시할 수 있는 반면에 package-lock.json은 동일한 버전의 dependencies 설치를 보장하기 위해 정확한 버젼이 명시되어 있습니다.
8.3 Tilde Range(~)와 Caret Range(^)에 대해서 설명해주세요.
- Tilde Range는 버전명에 명시한 가장 마지막 버전의 변화만을 허용합니다.
- minor 버전을 명시하면, patch 버전의 변화를 허용합니다.
~1.2.3 := >=1.2.3 <1.3.0~1.2 := >=1.2.0 <1.3.0~0.2.3 := >=0.2.3 <0.3.0~0.2 := >= 0.2.0 <0.3.0
- minor 버전을 명시하지 않으면, minor 버전의 변화를 허용합니다.
~1 := >=1.0.0 <2.0.0~0 := >=0.0.0 <1.0.0
- Caret Range는 버전명에서 0이 아닌 가장 왼쪽 버전을 변경하지 않는 변화만을 허용합니다.
^1.2.3 := >=1.2.3 <2.0.0-0^0.2.3 := >=0.2.3 <0.3.0-00.0.3 := >=0.0.3 <0.0.4
9. reflow와 repaint의 개념에 대해 설명해주세요.
- reflow는 DOM 요소의 기하학적 속성이 변할 때, 브라우저의 사이즈가 변할 때, 스타일시트가 로딩되었을 때 발생하는 변화들을 다시 계산해주는 작업을 뜻합니다.
- repaint는 변경된 요소를 실제로 화면에 그려주는 작업을 말합니다.
- 배경색이나 visibility 속성이 변했을 때, reflow은 발생하지 않고 repaint만 발생합니다.
9.1 reflow와 repaint의 개선 방법과 적용 사례를 말씀해주세요.
- DOM 속성 변경 코드를 묶어서 한 번에 처리합니다.
- reflow 유발 메서드는 변수에 저장해 사용합니다.
- CSS 수정을 일괄로 변경합니다.
- CSS 수정이 많이 필요한 경우, CSS를 여러번 수정하기 보다 클래스명을 수정합니다.
- 여러 속성을 변경할 때, 해당 요소를 diplay:none 상태로 만들고 작업합니다.
- display:none이 적용되면 그 요소는 렌더트리에서 제외되고 없는 요소 취급 당하기 때문에 이 요소에 기하학적 변화가 일어나도 reflow나 repaint가 발생하지 않습니다.
10. reduce 함수에 대해 자세히 설명해주세요.
- reduce는 첫 번째 인자로 받은 callback 함수를 배열의 각 요소에 순서대로 실행하여 이전 요소에 대한 함수 반환값을 다음 요소에 전달합니다.
- callback 함수의 첫 번째 인자는 이전의 callback 함수 반환값입니다.
- callback 함수의 두 번째 인자는 배열의 현재 요소 값입니다.
- callback 함수의 세 번째 인자는 배열의 현재 요소의 인덱스입니다.
- callback 함수의 네 번째 인자는 reduce를 실행하는 배열입니다.
- 두 번째 인자로 초기값을 받을 수 있습니다.
11. 특정 컴포넌트에서 배열 [0, 1, 2]라는 값을 useState, array.push, useRef 상태로 다루었을 때 어떤식으로 변경되는지 말씀해주세요.
- useState를 사용하여 배열 상태를 선언했을 때, 값을 변경하면 변경된 값으로 대체되고 컴포넌트가 리렌더링됩니다.
- 배열을 선언하고 array.push를 사용하여 값을 추가하였을 때는 배열이 변경되지 않고 같은 배열 내에 값이 추가됩니다. 그리고 컴포넌트는 리렌더링되지 않습니다.
- useRef를 사용하여 배열 상태를 선언했을 때, 값을 변경하면 current 속성이 바뀌지만 컴포넌트가 리렌더링되지 않습니다.
참고
