기술면접

1. 상태관리를 왜 할까요? 그리고 평소 state(상태) 관리는 어떻게 하시나요?

리액트는 단방향 데이터 흐름으로, data 전달 시 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달이 가능함.

그 자식 컴포넌트에게 주려면 다시 props를 이용하여 연결해줘야하기 때문에 props driling이 발생하여 유지 보수가 어려워지게 된다. 이런 상태 관리를 효율적으로 하기 위한 여러가지 툴들(Redux, react query, zustand 등 )이 존재한다.

 

보통은 local state로 관리하고,

여러 컴포넌트가 하나의 state에 접근해야 한다거나

Props drilling의 depth가 3단계 이상이라고하면 global state로 관리합니다.

 

2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?

Redux는 React를 포함한 JavaScript Application들의 전역 상태관리 라이브러리.

 

리덕스는 단방향 데이터 흐름의 특징을 가진다.

리덕스 스토어에 따로 컴포넌트에 필요한 데이터들을 관리하고 있고

해당 컴포넌트에서 바로 스토어에 접근해서 사용할 수 있어 데이터를 관리하기가 용이하기 때문에 사용.

 

전역 상태관리 뿐만 아니라 thunk등의 미들웨어와, redux devtool이라는 개발자 도구를 지원하는 장점이 있습니다.

 

전역 상태 저장소를 제공하여 props driling이슈를 해결한다.

props driling의 문제는 어디서 부터 온건지 파악이 힘들어지고, 중간에 문제가 생길 경우 그 자식 컴포넌트들에 데이터를 전달하지 않게 될 수 있기 때문에 이러한 문제가 발생할 수 있다.

 

 

 

3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요

최신 상태관리 라이브러리 중 zustand는

rtk에 비교하여 압도적으로 작은 크기를 가지고 있고, 

보일러 플레이트가 최소화된 상태관리 solution입니다. Store 형태임에도 굉장히 간단하게 상태관리 구성이 가능하다.

 

컴포넌트를 provider로 감쌀 필요 없으며, useSelector와 useDispatch 훅을 import 해올 필요없이

zustand에서 create를 import 하는 것만으로도 Zustand의 스토어와 리듀서를 사용할 수 있고, 생성한 store훅을 통해 쉽게 상태와 액션에 접근 가능하다.

 

또한 zustand에서 비동기 처리, Immer, subscribe기능을 제공하고있으며, subscribe기능을 사용하여 자주 렌더링 되는 항목에 대해서 랜더링을 유발하지 않고 변경하여 처리할 수 있습니다. 

이처럼 간단하고 직관적인 API를 제공하고 Redux보다 더 간결한 방법으로 보일러플레이트를 최소화하여 상태 관리를 할 수 있다.

 

4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요

Real DOM은 element의 자식노드가 추가되면 전체 문서가 갱신되지만 

Virtual DOM은 리얼 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 가상 돔과 비교하여 변경점만 Real DOM에 적용하여  전체 문서가 갱신되지 않습니다. 

한번만 돔 수정을 하고 한번만 렌더 트리를 만들어 내게 함으로서 불필요한 렌더링 횟수를 줄일 수 있습니다. 

 

DOM에서 어떠한 element를 찾을 때 

자바스크립트가  querySelector등으로 메소드를 이용하여 HTML 문서의 각 요소들을 접근하였는데,

Virtual DOM을 사용하는 React에서는 ref를 사용하여 element에 접근할 수 있습니다.

 

5. useRef에 대해 설명해보세요

리액트와 같은 함수형 컴포넌트에서 DOM을 선택 시 useRef라는 Hook 함수를 사용하여 ref를 이용할 수 있습니다.

리액트에서 특정 DOM에 포커스를 주거나 크기나 색상이 변경하거나

타이머 함수, 스크롤위치와 같은 경우처럼 컴포넌트 내의 조회/수정이 가능하지만 리렌더링이 필요없는 변수를 관리할 때도 활용할 수 있습니다.

 

6. useEffect의 실행 순서에 대해 설명해주세요

useEffect는 기본적으로 랜더링이 일어난 이후에 실행됩니다.

의존성배열을 빈 값으로 두게되면 최초 랜더링 시에만 내부 코드가 실행되며,

dependency를 넣어준 경우, 배열의 상태가 변할 때마다 내부 코드가 실행됩니다.

return안의 코드는 useEffect발동 전에도 실행되고 컴포넌트 unmount시에도 실행됩니다.

 

7. var, let, const의 차이에 대해 알려주세요.

var: Function-scoped(펑션스코프). 변수의 재선언, 재할당 모두 가능

let: block-scoped(함수스코프). 재선언 불가 재할당 가능

const: block-scoped. 재선언, 재할당 모두 불가능

 

8. Async/Await와 Promise의 차이

1) 에러 핸들링 기능 존재여부

• ES6부터 지원하는 Promise는 then, catch메서드를 활용하여 에러 핸들링이 가능하지만, 
• ES8부터 지원하는 async/await 은 에러 핸들링 할 수 있는 메서드가 존재하지 않으므로 try-catch() 문을 활용해야 한다

2) 코드 가독성

• Promise의 .then() 지옥의 가능성이 있음
• 코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
• async/await 은 비동기 코드가 동기 코드처럼 직관적인 코드의 흐름으로 읽히게 해준다. 코드 흐름을 이해 하기 쉽다