React 기술면접 예상질문 미리보기<2>

useRef, useEffect, var let const의 차이, Promise와 Async/Await의 차이. 뭐라고 답해야 할까?
Apr 03, 2024
React 기술면접 예상질문 미리보기<2>
 
💡
리엑트(React)는 네이버, 카카오, 쿠팡, 배달의 민족 등 국내 기업에서 가장 많이 쓰이는 프론트엔드 기반 기술입니다. 현재 리액트 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 리액트 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
 

Q (1). useRef에 대해 설명해주세요.

핵심 키워드 : DOM, 유지, 컴포넌트 내 접근
🧑‍💻 수강생 답변
useRef는 크게 2가지의 역할을 수행합니다.먼저, 저장공간의 역할인데, state와 비슷한 역할을 하지만 state와의 차이점은 state는 변화가 일어나면 리-렌더링이 일어나고 내부 변수들은 초기화되는 반면에, ref에 저장한 값은 렌더링이 일어나지 않습니다. 즉, ref의 값 변화가 일어나도 렌더링으로 인해 내부변수들이 초기화되는 것을 막을 수 있습니다. 두 번째로 돔 요소에 접근할 수 있는 역할입니다.바닐라js에서 특정 돔을 선택하기 위해 getElementById 또는 querySelector를 이용했는데 리액트에서도 특정 돔을 선택해야 하는 경우가 있습니다. 예를 들어 화면이 렌더링 된 직후 특정 input 태그가 포커싱이 되어야 하는 경우 useRef를 사용합니다.
 
🗣️멘토님 피드백
  • useRef에 대해서 ‘저장 공간의 역할’과 ‘돔 요소에 접근할 수 있는 역할’을 기준으로 핵심적인 요소들만 잘 설명하고 있습니다.
 
😄 좋은 부분
  • 저장 공간의 역할로 ‘useRef에 저장된 값은 렌더링이 일어나지 않기 때문에 내부변수들이 초기화되는 것을 막을 수 있다’를 설명
  • 돔 요소에 접근할 수 있는 역할로 ‘렌더링 된 직후 특정 input 태그가 포커싱이 되어야 경우 사용’을 설명
 
 

Q (2). useEffect의 실행 순서에 대해 설명해주세요.

핵심 키워드 : 렌더링, 의존성 배열 , clean up, set up
🧑‍💻 수강생 답변
useEffect가 실행되는 순서는 첫 번째, 컴포넌트가 렌더링 되면 useEffect의 내용이 실행되기 전의 화면이 먼저 그려집니다. 두 번째, useEffect 내의 콜백 함수가 실행되며, 세 번째, useEffect의 두번째 매개변수로 전달된 의존성 배열이 체크가 됩니다. 네 번째, 만약 의존성 배열에 들어있는 값이 변경되면 컴포넌트가 리-렌더링되고 useEffect의 내용이 다시 실행됩니다. 요약하자면 컴포넌트가 마운트 될 때 setup 함수가 호출되고, 그 이후 컴포넌트의 상태나 속성이 변경될 때 실행되고, 변경 이전 값으로 clean up 함수가 호출되고 변경 이후 값으로 setup 함수가 호출되게 됩니다.
 
🗣️ 멘토님 피드백
useEffect의 실행 프로세스를 간단명료하게 잘 정리해서 설명하고 있습니다.
 
😄 좋은 부분
  • useEffect 실행 순서를 “ 컴포넌트가 마운트 될 때 setup 함수가 호출되고, 그 이후 컴포넌트의 상태나 속성이 변경될 때 실행되고, 변경 이전 값으로 clean up 함수가 호출되고 변경 이후 값으로 setup 함수가 호출되게 된다”로 정리
 
 

Q (3). var, let, const의 차이에 대해 알려주세요.

핵심 키워드 : 호이스팅, 재선언, 재할당
🧑‍💻 수강생 답변
var, let, const은 변수 선언 방식, 스코프, 그리고 호이스팅 이 3가지에서 가장 큰 차이점을 보인다고 생각합니다. 첫 번째로 변수 선언 방식입니다. var는 변수를 재선언하거나 재할당하는 것이 가능합니다. let은 변수 재선언은 불가능하지만 재할당은 허용됩니다. const는 변수를 선언하면서 동시에 초기화해야 하며, 재할당도 불가능합니다. 단, 객체 내부의 속성 변경은 가능합니다. 두 번째로 스코프 즉 유효한 참조 범위입니다. var는 함수 레벨 스코프를 가집니다. 따라서 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없습니다. let과 const는 블록 레벨 스코프를 가집니다. 함수, if절, for, while, try/catch 등등의 코드 블록 내에서 선언된 변수가 해당 블록 내에서만 유효하다는 것을 의미합니다.
세 번째 호이스팅입니다. 우선 호이스팅이란 자바스크립트 함수는 실행되기 전 함수 내 필요한 변값들을 모두 모아 유효 범위의 최상단에 선언한 것처럼 동작하는 방식인데요. var로 선언된 변수는 호이스팅 시 변수의 선언만 최상단으로 끌어올려 지며, 초기화는 그대로 남아 있어 접근 시 undefined 값을 반환합니다. let과 const 역시 호이스팅되지만, '임시적 사각지대(TDZ)' 때문에 선언 이전에 변수에 접근하려고 하면 ReferenceError가 발생합니다.변수의 재할당이 필요 없거나 객체나 배열 내부의 값을 변경하는 것만 필요한 경우 const를 사용하는 것이 좋습니다. 반면, 변수의 재할당이 필요한 경우에는 let을 사용하는 것을 권장합니다.
 
🗣️멘토님 피드백
  • var, let, const의 차이점을 ‘변수 선언 방식’, ‘유효한 참조 범위’, ‘호이스팅’을 키워드로 나누어 비교해서 잘 설명하고 있습니다.
 
😄 좋은 부분
  • ‘변수 선언 방식’에서의 차이를 “var는 변수를 재선언하거나 재할당하는 것이 가능하고 let은 변수 재선언은 불가능하지만 재할당은 허용된다. const는 변수를 선언하면서 동시에 초기화해야 하며, 재할당도 불가능하지만 객체 내부의 속성 변경은 가능하다”고 설명
  • “유효한 참조 범위”에서의 차이를 “var는 함수 레벨 스코프를 가집니다. 따라서 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없습니다. let과 const는 블록 레벨 스코프를 가진다”로 설명
  • “호이스팅”에서의 차이를 ‘var로 선언된 변수는 호이스팅 시 변수의 선언만 최상단으로 끌어올려 지며, 초기화는 그대로 남아 있어 접근 시 undefined 값을 반환한다. let과 const 역시 호이스팅되지만, '임시적 사각지대(TDZ)' 때문에 선언 이전에 변수에 접근하려고 하면 ReferenceError가 발생하기에 변수 재할당이 필요 없거나 객체나 배열 내부의 값을 변경하는 것만 필요한 경우 const를 사용하고 변수의 재할당이 필요한 경우에는 let을 사용하는 것이 좋다’고 설명
 
 

Q (4). Promise와 Async/Await의 차이에 대해 설명해주세요.

핵심 키워드 : 비동기 처리, 콜백 지옥, 예외 처리
🧑‍💻 수강생 답변
Async/Await와 Promise의 주요 차이점 중 하나는 문법적인 차이입니다. Promise는 .then(), .catch()와 같은 메서드를 사용하여 비동기 작업을 처리하고, 콜백 함수를 전달하는 방식으로 동작합니다. 반면에 Async/Await는 async 함수 내에서 await 키워드를 사용하여 동기적인 코드와 유사한 방식으로 비동기 작업을 처리합니다. 이로 인해 코드가 더 읽기 쉽고 직관적으로 보입니다.
또 다른 중요한 차이점은 에러 처리 방법입니다. Promise의 에러 처리는 .catch()를 사용하여 처리하며, 여러 Promise 체인에서 오류를 추적하기 어려울 수 있습니다. 반면에 Async/Await는 `try-catch` 블록을 사용하여 에러 처리를 보다 직관적으로 수행할 수 있어 오류 추적과 디버깅이 용이합니다. 또한 Async/Await는 코드의 가독성과 유지 보수성을 향상시킬 수 있는데, 동기적인 코드와 유사한 구조를 사용하므로 코드를 이해하고 유지 보수하기가 더 쉽습니다. 그러므로 이러한 이유로 Async/Await는 보다 간결하고 읽기 쉬운 코드를 작성하는 데 도움이 됩니다.
 
🗣️ 멘토님 피드백 Promise와 Async/Await의 차이를 “문법적인 차이”와 “에러 처리 방법”을 기준으로 각각의 키워드 정의와 특장점을 비교하면서 잘 설명하고 있습니다.
 
🤔 좋은 부분
  • ‘문법적인 차이’로 “Promise는 .then(), .catch()와 같은 메서드를 사용하여 비동기 작업을 처리하고, 콜백 함수를 전달하는 방식으로 동작하고 Async/Await는 async 함수 내에서 await 키워드를 사용하여 동기적인 코드와 유사한 방식으로 비동기 작업을 처리한다”로 설명
  • ‘에러 처리 방법의 차이’로는 “Promise의 에러 처리는 .catch()를 사용하여 처리하며, 여러 Promise 체인에서 오류를 추적하기 어려울 수 있다. 반면에 Async/Await는 `try-catch` 블록을 사용하여 에러 처리를 보다 직관적으로 수행할 수 있어 오류 추적과 디버깅이 용이하며 동기적인 코드와 유사한 구조를 사용하므로 코드를 이해하고 유지 보수하기가 더 쉽다"로 설명
 
 
 
리액트(React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋은지 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
 
 
 

🚢 개발자 취업 준비 어떻게 시작해야 할지 모르겠나요? 취업으로 향하는 거친 항해에서 든든한 메이트가 되어 드리겠습니다.

취업 실패 시 교육비 0원. 반드시 취업까지 책임질 수 있다는 항해의 자신감입니다.
높은 수준의 개인 프로젝트 경험이 없는 개발 유관 전공자, 전반적인 학습이 부족한 부트캠프 수료생이라면 개발자 취업 리부트 코스에 합류하세요. 자료구조 공부, 프로젝트, 코테준비, 이력서와 면접 대비까지 취업 리부트 코스에서 한 번에 할 수 있습니다. 갈수록 높아지는 개발자 취업의 벽, 개발자 취업 리부트 코스로 11주 만에 취업의 문을 열어 보세요
 
 
 
CREDIT
글 | 송민영 팀스파르타 에디터
Share article
Subscribe Newsletter
Stay connected for the latest news and insights.
RSSPowered by inblog