👩🏻💻 Today Learn
- 알림기능 마무리
💡 기술면접문제
1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
상태관리를 해야하는 이유는 여러 컴포넌트 간의 데이터 공유를 용이하게 하여 중복되는 코드를 방지하고 코드의 재사용성을 증가시킬 수 있습니다. 또한 필요한 상태만 업데이트 하여 불필요한 렌더링, 네트워크 요청을 최소화 하여 성능 최적화에 도움이 됩니다.
state 관리는 Redux로 중앙저장소를 만들고 Reducer를 통해서만 전역 상태를 변경하고 업데이트 할 수 있는 중앙 상태 관리 방식을 이용하였습니다.
2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?
Redux는 상태관리 라이브러리로 Store, Action, Reducer를 이용해 state를 전역으로 관리할 수 있습니다.
이러한 Redux를 사용하는 이유이자 장점으로 첫번째 상태들이 자주 업데이트 되거나 로직이 복잡할 때 코드의 유지보수에 용이하고 재사용성을 높일 수 있습니다.
두번째는 어느 컴포넌트에서든 같은 상태를 참조하게 되어 일관성을 유지할 수 있고, 마지막으로 Redux DevTools를 이용하여 디버깅과 테스트가 용이하다는 점입니다.
3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요
Redux외에 전역상태가 관리 가능한 것으로는 Zustand가 있다. Zustand는 Typescript로 작성된 라이브러리이며 간결하고 상태가 변경되어도 불필요한 렌더링을 일으키지 않고 보일러 플레이트가 거의 없다는 장점이 있습니다.
Redux와의 차이점으로 먼저 Zustand는 컴포넌트를 Provider로 감쌀 필요가 없고 코드가 훨씬 간결하고 읽기 편합니다. 따라서 복잡한 상태 관리가 필요 없는 작은 규모의 프로젝트에 적합한 가벼운 상태관리로 사용하기 좋습니다.
Redux는 반대로 복잡한 상태 관리를 필요로 하고 개발기간이 긴 큰 규모의 프로젝트에 적절한 상태관리 라이브러리라고 할 수 있습니다. 비교했을때 더욱 구조적이고 표준화된 상태관리 방식을 제공해주기 때문에 일관성 있는 팀 협력을 유지하기에 좋습니다.
4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
먼저 DOM이란 HTML문서를 객체로 표현한 것으로 Real DOM은 옛날 HTML에서 주로 쓰였는데 옛날에는 DOM이 한 덩어리라 새로운 업데이트가 일어나면 새로운 DOM을 받아와서 모든 데이터를 다시 불러왔었습니다.
반면에 현재는 SPA 프레임워크로 인해 Virtual DOM을 많이 쓰는 추세인데 실제 DOM을 건드리지 않고 가상으로 또 하나의 DOM을 만들어서 현재의 DOM과 비교 후 차이점이 있는 DOM만 업데이트 하는 방식이기 때문에 Virtual DOM을 쓰는 언어들은 불변성이 중요합니다.
5. useRef에 대해 설명해주세요.
Ref는 (reference) 참조를 뜻하는데 저장공간이나 DOM요소에 접근하기 위해 사용되는 React Hook으로 불필요한 재렌더링을 하지 않는다는 장점이 있습니다.
useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref객체를 반환하는데 반환된 객체는 컴포넌트의 전생애주기를 통해 유지가 됩니다.
따라서 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있고, current속성은 값을 변경해도 상태를 변경할 때 처럼 React컴포넌트가 재렌더링 되지 않습니다.
쉽게 말해 렌더링과 상관없이 마운트된 시점부터 언마운트된 시점까지 값을 유지할 수 있습니다.
6. var, let, const의 차이에 대해 알려주세요.
var는 중복선언이 가능하고 재할당도 가능합니다. 따라서 마지막에 할당된 값이 최종 변수에 저장됩니다.
let은 중복선언이 불가능하고 재할당은 가능합니다.
const 는 중복선언이 불가능하고 재할당도 불가능합니다.
7. Async/Await와 Promise의 차이에 대해 설명해주세요.
자바스크립트에서 비동기 처리를 다룰 수 있는 방법인데 먼저 Promise는 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 말할 수 있습니다. Promise에는 pending(대기), Fulfilled(이행), Rejected(실패)의 3가지 상태가 있으며 then()과 catch()문을 이용해 비동기 로직의 성공여부에 따른 분기 처리가 가능합니다. 하지만 Promise의 경우에 꼬리에 꼬리를 무는 코드가 될 수 있는 콜백 헬이 될 수 있기 때문에 이러한 단점을 보완하고자 한 것이 async/await입니다.
await는 async함수 안에서만 동작하는 것이고 Promise와의 차이점 중 하나로 async/await는 에러 핸들링 할 수 있는 기능이 없어서 try-catch()를 활용해주어야 한다는 것입니다.
또 다른 차이점으로는 async/await가 코드가 길어질수록 가독성이 좋고 코드 흐름을 이해하기 쉽다는 것입니다.
✍🏻 회고
좀 게을러졌다.. 다른 문제도 빠르게 정리해야겠다!
TODO: 그냥 복붙하는 것이 아니라 다양한 자료를 읽어보고 키워드를 파악해서 이해한 내용을 토대로 정리하는 연습하기
