React 기술면접 예상질문 미리보기 <3>
Arrow Function, '=='/'===' 차이, 무한 스크롤 구현, JSX의 정의. 뭐라고 답해야 할까?
Apr 19, 2024
리엑트(React)는 네이버, 카카오, 쿠팡, 배달의 민족 등 국내 기업에서 가장 많이 쓰이는 프론트엔드 기반 기술입니다. 현재 리액트 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 리액트 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
Q (1). Arrow Function 이란 무엇인지 설명해주실 수 있을까요?
핵심 키워드 : 매개 변수, this, 익명 함수, 바인딩
🧑💻 수강생 답변
Arrow Function은 ES6 문법에서 도입된 새로운 함수 표현 방식입니다. 전통적인 함수 표현 방식은 this 바인딩 관련 문제가 있었고, 이러한 문제를 해결하기 위해 Arrow Function이 등장하게 되었습니다. Arrow Function은 this를 바인딩하지 않기 때문에 Arrow Function 안에서 this를 사용하면 상위 스코프의 this를 가리키게 됩니다. 이러한 특징 때문에 this와 관련된 혼동을 줄일 수 있고, 이벤트 핸들러나 콜백함수에서 유용하게 사용됩니다. 또한, 불필요한 함수 키워드나 중괄호를 생략할 수 있어서 코드를 더 간단하게 작성할 수 있고, 가독성을 높여준다는 장점이 있습니다.
🗣️멘토님 피드백
애로우 함수(Arrow Function)의 장점을 기반으로 어떤 기능을 개발할 때 적용하면 좋을지에 대한 예시를 설명해줘서 좋은 답변입니다.
😄 좋은 부분
- 애로우 함수의 장점을 나타내서 설명한 부분 ” Arrow Function은 this를 바인딩하지 않기 때문에 Arrow Function 안에서 this를 사용하면 상위 스코프의 this를 가리키게 됩니다. “ ” 불필요한 함수 키워드나 중괄호를 생략할 수 있어서 코드를 더 간단하게 작성할 수 있고, 가독성을 높여준다는 장점이 있습니다.”
- 애로우 함수가 어떤 기능을 개발할 때 적용하면 좋을지에 대한 예시 설명한 부분 ” 이러한 특징 때문에 this와 관련된 혼동을 줄일 수 있고, 이벤트 핸들러나 콜백함수에서 유용하게 사용됩니다.”
Q (2). ‘==’와 ‘===’ 연산자의 차이는 무엇인지 설명해주실 수 있을까요?
핵심 키워드 : 값과 타입, 비교
🧑💻 수강생 답변
‘=='와 '===' 연산자는 값을 비교하는 연산자입니다. 두 연산자의 비교 방식에는 약간의 차이가 있습니다. '==' 는 동등 연산자로, 두 값을 비교하기 전에 강제 형 변환을 수행합니다. 피 연산자들의 자료형이 다르더라도 자료형을 공통 타입으로 변환한 후, 그 값을 비교하게 됩니다. 예로, 자바스크립트에서 문자형 '5'와 숫자형 5를 '==' 연산자로 비교하면 먼저 강제 형 변환을 거치기 때문에 결과값으로 true를 반환합니다. 이러한 특성 때문에 동등 연산자는 예기치 않은 결과를 초래할 수 있습니다. 일치 연산자 '===' 는 강제 형 변환 과정을 수행하지 않고, 자료형과 값이 모두 동일해야 true를 반환하는 엄격한 비교를 합니다. 따라서, 문자열 '5'와 숫자 5를 '===' 연산자로 비교하면 false가 반환됩니다. 자바스크립트에서는 값과 함께 자료형까지 정확하게 비교하고자 할 때 === 연산자를 사용하는 것을 권장합니다. 이 방법은 예상치 못한 결과를 방지하고, 코드의 예측성을 높여줍니다.
🗣️멘토님 피드백
‘==’와 ‘===’가 비교 연산자라는 것을 잘 말했고, 각각 연산자를 사용함으로써 얻을 수 있는 이점을 잘 설명하고 있는 답변입니다. 특히 일치 연산자를 사용함으로써 얻을 수 있는 이점을 잘 설명했습니다.
😄 좋은 부분
- ‘==’와 ‘===’가 비교 연산자라고 말한 부분 ”‘=='와 '===' 연산자는 값을 비교하는 연산자입니다.
- 각각 연산자를 사용함으로써 얻을 수 있는 이점을 잘 설명한 부분 ”'==' 는 동등 연산자로, 두 값을 비교하기 전에 강제 형 변환을 수행합니다.피 연산자들의 자료형이 다르더라도 자료형을 공통 타입으로 변환한 후, 그 값을 비교하게 됩니다.” (동등 연산자) ”일치 연산자 '===' 는 강제 형 변환 과정을 수행하지 않고, 자료형과 값이 모두 동일해야 true를 반환하는 엄격한 비교를 합니다.”(일치 연산자)
- 일치 연산자를 사용함으로서 얻을 수 있는 이점을 잘 설명한 부분 ”따라서, 문자열 '5'와 숫자 5를 '===' 연산자로 비교하면 false가 반환됩니다.자바스크립트에서는 값과 함께 자료형까지 정확하게 비교하고자 할 때 === 연산자를 사용하는 것을 권장합니다. 이 방법은 예상치 못한 결과를 방지하고, 코드의 예측성을 높여줍니다.”
Q (3). 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?
핵심 키워드 : 메모리, 부하 테스트, 성능 개선
🧑💻 수강생 답변
무한 스크롤을 구현할 때 큰 데이터셋을 다루게 된다면, 최적화를 통하여 사용자 경험을 고려해야 합니다. 이를 위해서는 모든 10,000개의 데이터를 한 번에 로드하는 것이 아니라, 필요에 따라 작은 단위로 데이터를 로드해야 합니다. 또한 무한 스크롤은 많은 양의 DOM 요소를 생성할 수 있으므로, 메모리 누수를 방지하고 성능을 최적화하기 위해 화면에 보이지 않는 요소는 메모리에서 제거하거나 재사용하는 등의 방법을 사용할 수 있습니다.
🗣️멘토님 피드백
프론트엔드 입장에서 올바른 답변을했고, 왜 그렇게 해야하는지도 상사하게 대답하고 있습니다. 하지만 이 기술 문제는 프론트에만 국한된 문제는 아니기 때문에 백엔드 쪽과 통신 시, 어떤 점을 유의해야하는지도 설명해주었다면 더 높은 점수를 받을 수 있는 답변이 완성될것이라고 생각합니다.
😄 좋은 부분
- 무한 스크롤 구현시 프론트엔드 입장에서 고려해야할 부분 잘 설명한 부분 ⇒ 학생 답변 전체에 해당함
🤔 아쉬운 부분
- 백엔드 쪽과 소통 시 어떤 점을 유의해야하는지 설명하지 않은 부분 ⇒ API 호출 최적화, 적절한 데이터 페이징을 고려하지 않으면 사용자 경험과 성능에 부정적인 영향을 줄 수 있다는 내용 추가할 것. "백엔드와의 통신에서는 API를 통한 데이터 요청 시, 페이지네이션 또는 데이터 스트리밍 방식을 적절히 적용하여 서버 부하를 최소화하고 데이터 전송 시간을 최적화하는 것이 중요합니다. API 호출의 최적화와 적절한 데이터 페이징을 고려하지 않을 경우, 사용자 경험과 시스템 성능에 부정적인 영향을 줄 수 있으며, 이는 전체 시스템의 반응 속도를 저하시킬 수 있습니다.” (예시)
Q (4). JSX란 무엇인가요?
핵심 키워드 : 재사용성, Babel
🧑💻 수강생 답변
JavaScript XML의 약자로, React서 사용되는 문법입니다. JSX를 사용하면 UI 구조를 더 명확하게 표현할 수 있어, 코드의 가독성이 높아집니다. 하지만 JSX는 브라우저에서 직접 실행되지 않습니다. Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환된 후 실행됩니다.
🗣️멘토님 피드백
JSX에 대한 정의와 장점, 단점 그리고 실행 프로세스 부분까지 간결하게 잘 이야기하고 있는 답변입니다.
😄 좋은 부분
- JSX 정의 ”JavaScript XML의 약자로, React서 사용되는 문법입니다.”
- JSX의 장점, 단점 ”JSX를 사용하면 UI 구조를 더 명확하게 표현할 수 있어, 코드의 가독성이 높아집니다. 하지만 JSX는 브라우저에서 직접 실행되지 않습니다.”
- JSX의 실행 프로세스 ”Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환된 후 실행됩니다.”
리엑트 (React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋을 지를 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나 인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
🚢 개발자 취업 준비 어떻게 시작해야 할지 모르겠나요? 취업으로 향하는 거친 항해에서 든든한 메이트가 되어 드리겠습니다.
취업 실패 시 교육비 0원. 반드시 취업까지 책임질 수 있다는 항해의 자신감입니다.
높은 수준의 개인 프로젝트 경험이 없는 개발 유관 전공자, 전반적인 학습이 부족한 부트캠프 수료생이라면 개발자 취업 리부트 코스에 합류하세요. 자료구조 공부, 프로젝트, 코테준비, 이력서와 면접 대비까지 취업 리부트 코스에서 한 번에 할 수 있습니다. 갈수록 높아지는 개발자 취업의 벽, 개발자 취업 리부트 코스로 11주 만에 취업의 문을 열어 보세요
CREDIT
글 | 송민영 팀스파르타 에디터
Share article
Subscribe to our newsletter