[프론트엔드] 면접준비 개념편
✅ 상태관리를 왜 할까요?
서로 다른 두 컴포넌트에 같은 데이터가 필요할 때, 각 컴포넌트가 부모 자식 관계로 되어있지 않은 이상, 직접적인 데이터 전달이 어려움
데이터를 부모 컴포넌트로 보내고 다시 그 데이터를 필요한 컴포넌트로 전달하는 props drilling 이슈가 생기게 되고 이때 이 prop이 어디에서 왔는지 추적하기 어려워짐
이런 상태 관리를 효율적으로 하기 위한 여러가지 툴들이 존재
Redux, react query, swr등이 존재
redux라는 전역 상태 라이브러리를 사용해 리액트 내의 state들을 관리
✅ Redux가 무엇인가요,왜 Redux를 사용하시나요?
JS상태관리 라이브러리
상태 관리 라이브러리는 전역 상태 저장소를 제공하며 props drilling 이슈를 해결
props drilling이 커질수록 상태관리 어려워져 이를 해결하기 위해서 redux를 사용
✅ Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요
Mobx
Redux와 같이 리액트에서 사용할 수 있는 상태 관리 라이브러리이며, 클래스형 컴포넌트를 기준으로 만들어져 객체 지향 프로그래밍 방식으로 코드를 작성할 수 있음
이 때문에 Mobx와 리액트의 함수형 컴포넌트의 Hooks를 함께 사용하면 오류가 발생할 수 있음
Recoil
Redux, Mobx와는 다르게 React에서 제공하는 상태 관리 라이브러리 Redux와 Mobx는 React의 라이브러리가 아니기 때문에 React 내부 스케줄러에 접근이 어려움
리액트는 최근 동시성 모드를 제공하기 위해 실험 중인데,
Recoil은 리액트의 상태를 사용하기 때문에 해당 기능도 지원가능
✅ 버츄얼 돔과 리얼돔의 차이를 설명해주세요
Dom
- 업데이트가 느림
- Html를 직접적으로 업데이트
- 새로운 element가 업데이트 된 경우 새로운 Dom생성
- 메모리 낭비가 심함
Virtual Dom
- 업데이트가 빠름
- Html을 직접적으로 업데이트를 하지 않음
- 새로운 element가 업데이트 된 경우 새로운 가상 Dom생성 후 이전 Dom과 비교 후 차이점Dom만 업데이트
- 메모리 낭비가 덜함
✅ useRef에 대해 설명해보세요
useRef를 사용하는 이유
- 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector같은 DOM Selector 함수를 사용
- 함수형 컴포넌트에서는 특정 태그를 선택할 때 useRef를 사용
특정 DOM을 선택?
말 그대로 특정 태그만 지정해서 그것만 사용할 때 useRef를 사용
예를 들어 특정 엘리먼트의 크기를 가져와야 한다던 지, 스크롤바 위치를 가져오거나 설정해야 된다던 지, 또는 포커스를 설정해줘야 된다던 지 등 또한 그래프라던가 비디오 등 외부 라이브러리를 사용할 때도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생 할 수 있음
