리액트 면접준비 [ 1~10문항 ]
리액트 면접 예상문제
1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
-하나의 상태에서 동일한 값을 지니기 위해서 상태 관리가 필요함.
useState로 동일 상태의 값 관리
Props로 상하위 컴포넌트로
state값 전달
redux로 전역 상태의 값 관리
context로 전역 상태관리
react-query로 전역상태관리
2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?
- 상태 관리를 현재 컴포넌트 뿐만 아니라 전체적으로 관리하기위함
Props Drilling으로는 규모가 커질수록 관리어렵
따라서 전역 저장소인 redux로 상태관리
3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요
- context, react-query등이 존재
- context는 특정 저장소로 값 전달용이
createContext사용 ⇒ Provide ⇒ useContext
- React-Query - 서버와의 상태관리를 도와줌
데이터만료시간, 리프레쉬 여부, 간격, 콜백 등 여러 요소를 고려할 수 있음.
- Mobx 객체형태
state관리 객체를 저장소로 활용하여 사용
4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요
- 리액트의 큰 특징 중 하나
리얼 돔은 실제 사용자가 보고있는 화면
버츄얼돔은 리얼돔에 올라가기 전 보이지는 않지만 화면을 구성 동작 시에 화면구성을 확인하는 기능
캐쉬 메모리와 비슷한 동작
5. useRef에 대해 설명해보세요
- 특정 돔을 선택하여 사용하기 위한 훅
사용할 돔에 ref값을 부여하여 current로 현재 값을 사용하는 방식
6. useEffect의 실행 순서에 대해 설명해주세요
-랜더링 마치고 실행
중간에 커스텀훅이 있다면 내부 effect 실행 하위컴포넌트부터 상위 컴포넌트로 진행
첫 번째 렌더링과 그 이후 모든 업데이트에서 수행
7. var, let, const의 차이에 대해 알려주세요.
- var 지역, 함수 레벨 스코프 적용
let, const ES6문법으로 블록 레벨 스코프
const 는 선언과 초기화를 동시 진행필요.
8. Async/Await와 Promise의 차이
- Promise는 비동기 처리에 사용되는 객체 결과를 아직 반환 안한 객체
callback지옥을 벗어나기 위함 꼬리에 꼬리를 무는 코드
catch를 통한 핸들링이 가능
async await 문법 등장
async로 promise를 적지않아도 동작하며
await으로 promise값을 받아오면 동작함 코드 가독성이 좋아짐
try-catch문으로 별도 핸들링 필요
9. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은?
- 뷰에서 보이는가?
- 불필요한 데이터 호출유무 과거의 데이터를 보고싶은 사람에게는 적합하지 않음
10. CloudFront를 사용해본적이 있나요? 사용해봤다면, CloudFront로 배포하는 이유를 설명해주세요.
- S3버킷은 리전이 멀어질수록 속도가 느려지고 접속자가 많을 수록 느려짐
CloudFront는 동적,정적 웹 콘텐츠,
API등을 대규모로 전송,
콘텐츠 전송 네트워크 서비스 CDN 서비스로 콘텐츠 전송이 빨라짐 (캐쉬서버를 이용한 속도 개선방식)
호스팅을 HTTPS로 보안성 개선도 가능