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

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

• useRef에 대해서 ‘저장 공간의 역할’과 ‘돔 요소에 접근할 수 있는 역할’을 기준으로 핵심적인 요소들만 잘 설명하고 있습니다.

• 저장 공간의 역할로 ‘useRef에 저장된 값은 렌더링이 일어나지 않기 때문에 내부변수들이 초기화되는 것을 막을 수 있다’를 설명

• 돔 요소에 접근할 수 있는 역할로 ‘렌더링 된 직후 특정 input 태그가 포커싱이 되어야 경우 사용’을 설명

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

• useEffect 실행 순서를 “ 컴포넌트가 마운트 될 때 setup 함수가 호출되고, 그 이후 컴포넌트의 상태나 속성이 변경될 때 실행되고, 변경 이전 값으로 clean up 함수가 호출되고 변경 이후 값으로 setup 함수가 호출되게 된다”로 정리

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

• var, let, const의 차이점을 ‘변수 선언 방식’, ‘유효한 참조 범위’, ‘호이스팅’을 키워드로 나누어 비교해서 잘 설명하고 있습니다.

• ‘변수 선언 방식’에서의 차이를 “var는 변수를 재선언하거나 재할당하는 것이 가능하고 let은 변수 재선언은 불가능하지만 재할당은 허용된다. const는 변수를 선언하면서 동시에 초기화해야 하며, 재할당도 불가능하지만 객체 내부의 속성 변경은 가능하다”고 설명

• “유효한 참조 범위”에서의 차이를 “var는 함수 레벨 스코프를 가집니다. 따라서 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없습니다. let과 const는 블록 레벨 스코프를 가진다”로 설명

• “호이스팅”에서의 차이를 ‘var로 선언된 변수는 호이스팅 시 변수의 선언만 최상단으로 끌어올려 지며, 초기화는 그대로 남아 있어 접근 시 undefined 값을 반환한다. let과 const 역시 호이스팅되지만, '임시적 사각지대(TDZ)' 때문에 선언 이전에 변수에 접근하려고 하면 ReferenceError가 발생하기에 변수 재할당이 필요 없거나 객체나 배열 내부의 값을 변경하는 것만 필요한 경우 const를 사용하고 변수의 재할당이 필요한 경우에는 let을 사용하는 것이 좋다’고 설명

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

• ‘문법적인 차이’로 “Promise는 .then(), .catch()와 같은 메서드를 사용하여 비동기 작업을 처리하고, 콜백 함수를 전달하는 방식으로 동작하고 Async/Await는 async 함수 내에서 await 키워드를 사용하여 동기적인 코드와 유사한 방식으로 비동기 작업을 처리한다”로 설명

• ‘에러 처리 방법의 차이’로는 “Promise의 에러 처리는 .catch()를 사용하여 처리하며, 여러 Promise 체인에서 오류를 추적하기 어려울 수 있다. 반면에 Async/Await는 `try-catch` 블록을 사용하여 에러 처리를 보다 직관적으로 수행할 수 있어 오류 추적과 디버깅이 용이하며 동기적인 코드와 유사한 구조를 사용하므로 코드를 이해하고 유지 보수하기가 더 쉽다"로 설명