프론트엔드 기술 면접 질문 리스트 - React

 

추가적으로 업데이트 예정

 

🎯 Q1. React 는 왜 등장했으며, 기존의 어떤 문제를 어떻게 해결해주는가?

React는 UI의 복잡성 증가와 상태 관리의 어려움을 해결하기 위해 등장하였다.

전통적인 DOM 조작 방식은 느리고 코드가 복잡하며, 데이터와 UI의 동기화가 어려웠다.

하지만 React는 컴포넌트 기반 설계와 Virtual DOM을 통해 효율적이고 선언적인 UI 개발을 가능하게 하였다.

 

 

🎯 Q2. React 는 라이브러리인가? 프레임워크인가? 둘의 차이점 및 React 에 대해 간략히 설명하세요.

React는 라이브러리이다.

  • 라이브러리: 특정 기능을 수행하며, 개발자가 필요한 부분을 선택해 사용
  • 프레임워크: 구조와 규칙을 제공하며, 개발자가 프레임워크의 방식 따라 개발

React는 UI 구축에만 초점을 맞춘 라이브러리로, 라우팅이나 상태 관리는 별도의 라이브러리와 조합해 사용한다.

https://itguswjd.tistory.com/196

 

라이브러리와 프레임워크 차이

요약하면 프레임워크는 라이브러리의 집합과 같다.라이브러리는 단일 문제 해결을 위한 단일 도구이며, 프레임워크는 다수 문제 해결을 위한 도구의 집합이다. 프레임워크는 다수의 라이브러

itguswjd.tistory.com

 

 

🎯 Q3. SPA 란 무엇이며, 어떤 장단점을 가지고 있는가?

SPA는 하나의 HTML 파일에서 콘텐츠를 동적으로 업데이트하는 웹 어플리케이션이다.

빠른 페이지 전환이 가능하고, 서버 요청 감소로 효율적인 네트워크 사용이 가능하다.

하지만 초기 로딩 속도가 느리고, SEO 최적화가 어려운 단점이 있다.

 

 

🎯 Q4. SPAMPA 의 차이는 무엇인가?

  • SPA : 단일 페이지에서 동적으로 콘텐츠를 교체
  • MPA : 각 페이지가 별도의 HTML 파일로 구성되어 서버 요청으로 페이지를 변경

 

 

🎯 Q5. CSR, SSR, SSG 은 무엇이며 각 차이점은 어떠한지 설명하세요.

CSR은 브라우저가 JavaScript를 실행하여 클라이언트에서 HTML을 동적으로 생성하는 방식이다.

서버는 주로 빈 HTML과 JavaScript파일만 제공하며, 초기 로드 시간이 길어질 수 있다. 주로 React와 같은 SPA 프레임워크에서 사용된다. 검색 엔진 최적화(SEO)가 어렵고 초기 로딩 성능이 중요한 경우 적합하지 않을 수 있다.

 

SSR은 서버에서 HTML을 생성해 클라이언트로 전달하는 방식이다. 초기 로드 시 완전한 HTML이 제공되므로 SEO에 유리하고 초기 콘텐츠 렌더링 속도가 빠르다. 그러나 페이지 이동 시 서버 요청이 반복되어 사용자 경험이 CSR보다 덜 부드러울 수 있다. React에서는 Next.js로 SSR을 구현할 수 있다. 서버 부하가 증가할 수 있으므로 적절한 캐싱 전략이 필요하다.

 

SSG는 빌드 시점에 HTML을 미리 생성하여 정적 파일로 제공하는 방식이다. 요청 시 서버 처리가 필요 없으므로 성능이 매우 뛰어나고, SEO에도 효과적이다. 주로 블로그나 문서 사이트처럼 콘텐츠 변경이 적은 경우 적합하다. React에서는 Next.js를 사용하여 SSG를 구현할 수 있다. 콘텐츠 변경 시 빌드를 다시 수행해야 하므로 동적 데이터에 적합하지 않을 수 있다.

 

 

🎯 Q6. SPA Routing/Navigation 은 무엇이며, 기존과 어떤 차이가 있는가?

SPA Routing/Navigation은 싱글 페이지 어플리케이션에서 라우팅을 처리하는 방식이다. 브라우저의 URL만 변경하고 페이지 전체를 다시 로드하지 않아 빠르고 부드러운 사용자 경험을 제공한다. 기존 MPA 방식은 페이지 이동마다 서버에 새 HTML을 요청하므로 속도가 느리고 깜박임이 발생할 수 있다. React에서는 React Router를 사용하여 SPA 라우팅을 구현한다. SPA 라우팅은 클라이언트 측에서 처리되므로 초기 렌더링이 끝난 후에는 서버 요청을 최소화할 수 있다.

 

 

🎯 Q7. React 를 왜 사용하는가?

React는 UI 컴포넌트를 선언적으로 작성할 수 있어 코드 가독성과 유지보수가 뛰어나다. Virtual DOM을 사용하여 변경 사항만 효율적으로 업데이트하므로 성능이 우수하다. 컴포넌트 기반 구조로 재사용성이 높아 대규모 애플리케이션 개발에 적합하다. 방대한 생태계와 커뮤니티 지원 덕분에 다양한 플러그인과 도구를 활용할 수 있다. 또한 CSR, SSR, SSG를 모두 지원하여 다양한 요구 사항에 유연하게 대응할 수 있다.

 

 

🎯 Q8. JSX 는 어떤것이고, 어떤 장점을 가지며, 어떤 특성이 있는지 간략히 설명하세요.

JSX는 JavaScript 내에서 HTML을 작성할 수 있는 React의 확장 문법이다. HTML과 JavaScript를 결합하여 코드의 가독성을 높이고, 개발자가 UI를 직관적으로 구성할 수 있게 한다. Babel 같은 도구가 JSX를 JavaScript로 변환해 실행된다. 변수와 표현식을 {}로 감싸 쉽게 삽입할 수 있으며, React 요소 생성 시 효율적으로 활용된다. JSX는 컴파일 시 오류를 감지해 개발자 실수를 줄이는 데 도움을 준다.

 

 

🎯 Q9. React 에서의 Model-View 그리고 Controller 각각에 대해 설명하세요.

Model은 상태와 데이터를 관리하는 부분으로, React에서는 주로 useState나 상태 관리 라이브러리(Recoil, Redux)를 통해 구현된다.
View는 데이터를 시각적으로 표현하는 컴포넌트로, React 컴포넌트 구조가 View를 담당한다.
Controller는 이벤트 처리와 상태 업데이트 로직을 관리하며, React에서는 주로 이벤트 핸들러와 상태 업데이트 함수로 동작한다.

 

 

🎯 Q10. 단방향 바인딩이란 어떤 의미인가요?

단방향 바인딩은 데이터가 부모에서 자식으로 한 방향으로만 흐르는 구조를 의미한다.

React에서 props를 통해 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 방식이 대표적이다.

이 구조는 데이터 흐름을 명확히 이해하고 디버깅하기 쉽게 만든다.

반면, 자식에서 부모로 데이터를 전달하려면 이벤트 콜백 함수를 사용해야 한다.

React는 단방향 데이터 흐름을 통해 상태를 예측 가능하게 관리하며, 복잡한 애플리케이션에서도 유지보수성을 높인다.

 

 

🎯 Q11. Vite 는 무엇인가요?

Vite는 빠르고 현대적인 프론트엔드 개발을 위한 빌드 도구이다. 기존 번들러와 달리 ESModules를 활용하여 초기 번들링 없이 브라우저가 직접 코드를 실행하도록 돕는다. 이를 통해 개발 서버의 속도를 크게 개선하며, 특히 Hot Module Replacement(HMR) 기능이 뛰어나 코드 수정 시 빠른 피드백을 제공한다. React, Vue, Svelte 등 다양한 프레임워크와 호환되며, 구성 또한 간단해 개발자들이 쉽게 사용할 수 있다. Vite는 대규모 프로젝트에서도 빌드 속도를 획기적으로 향상시켜 개발 생산성을 높이는 데 기여한다.

 

 

🎯 Q12. nvmnpm 각각은 무엇이고 왜 쓰는지 설명하세요.

nvm은 Node.js의 버전을 관리하기 위한 도구로, 프로젝트마다 요구하는 Node.js 버전이 다를 때 유용하게 사용된다. 예를 들어, 하나의 프로젝트에서는 최신 버전을, 다른 프로젝트에서는 이전 버전을 요구하는 상황에서 nvm을 통해 손쉽게 전환할 수 있다.

 

반면, npm은 Node.js와 함께 제공되는 패키지 관리 도구로, 프로젝트의 의존성 라이브러리를 설치하고 관리하는 데 사용된다. npm을 통해 필요한 라이브러리를 설치하거나, 프로젝트를 실행하기 위한 스크립트를 설정할 수 있다. nvm과 npm은 Node.js 환경에서 효율적인 개발을 지원하는 필수 도구로 널리 사용되고 있다.

 

 

🎯 Q13. .nvmrc.npmrc 각각은 어떤 목적을 갖는지 설명하세요.

.nvmrc 파일은 특정 프로젝트에서 사용할 Node.js의 버전을 명시하는 데 사용된다. 이를 통해 프로젝트에 들어올 다른 개발자들도 동일한 Node.js 버전을 사용할 수 있도록 보장할 수 있다.

 

.npmrc 파일은 npm의 설정을 정의하는 파일로, 레지스트리 경로, 캐시 설정, 프록시 설정 등을 포함할 수 있다. 예를 들어, 조직 내부의 전용 레지스트리를 사용하거나, 특정 버전의 npm 동작을 제어하는 데 활용된다. 두 파일 모두 프로젝트의 일관성과 개발 환경의 효율성을 유지하는 데 중요한 역할을 한다.

 

 

🎯 Q14. package-lock.json 은 무엇이며, 꼭 필요한것인지 없어도 되는것인지 설명하세요.

package-lock.json은 프로젝트의 의존성 트리를 정확히 기록하여 동일한 패키지 버전이 설치되도록 보장하는 파일이다. 이를 통해 팀원 간 환경 차이나 배포 시 의존성 버전 문제를 예방할 수 있다. 예를 들어, 동일한 package.json 파일을 사용해도 package-lock.json 없이 설치하면 각기 다른 버전의 패키지가 설치될 수 있다. 따라서 안정적이고 예측 가능한 빌드 환경을 유지하려면 반드시 필요하다. package-lock.json은 없어도 프로젝트가 동작할 수는 있지만, 협업과 배포 과정에서 의존성 충돌이 발생할 가능성을 높인다.

 

 

🎯 Q15. React 에서 index.html 의 역할은 무엇인가요.

React에서 index.html은 애플리케이션의 기본 HTML 구조를 제공하는 역할을 한다. 이 파일에는 React가 렌더링을 시작할 수 있는 루트 DOM 요소(일반적으로 <div id="root">)가 포함되어 있다. React 컴포넌트는 이 루트 요소 안에 렌더링되며, SPA의 동적 콘텐츠가 사용자에게 표시된다. 또한, 이 파일은 메타 태그, 폰트, 외부 리소스 등 초기 HTML 설정을 구성하는 데 사용된다. React 애플리케이션은 index.html을 기반으로 모든 페이지를 렌더링하므로 핵심적인 역할을 한다.

 

 

🎯 Q16. FormatterLinter 각각 어떤 역할을 하는지 설명하세요.

Formatter는 코드의 스타일을 자동으로 정리해주는 도구로, 일관된 코드 형식을 유지하는 데 사용된다. 개발자가 코드를 작성할 때 발생할 수 있는 들여쓰기나 공백 문제를 자동으로 해결하여 가독성을 높인다.

 

Linter는 코드에서 발생할 수 있는 문법 오류나 잠재적인 버그를 찾아주는 도구이다. 또한, 특정 코드 스타일 가이드를 강제하여 팀 내 코드 품질을 일관성 있게 유지한다. 두 도구는 함께 사용하여 코드의 품질과 가독성을 동시에 관리할 수 있다.

 

 

🎯 Q17. jsconfig.json 혹은 tsconfig.json 에는 어떤 옵션들이 들어가는지, 왜 사용하는지 몇 개만 설명하세요.

jsconfig.json과 tsconfig.json은 JavaScript와 TypeScript 프로젝트의 컴파일러 옵션을 설정하는 파일이다.

  1. baseUrl: 절대 경로를 설정하여 파일 임포트 경로를 간결하게 만든다.
  2. paths: 특정 경로에 대해 별칭을 설정해 관리하기 쉽게 만든다.
  3. includeexclude: 프로젝트에 포함되거나 제외될 파일을 지정한다. 

 

 

🎯 Q18. 컴포넌트를 임포트할때 절대경로를 사용해야하는 이유를 설명하세요.

컴포넌트를 절대경로로 임포트하면 파일 구조가 복잡할 때도 코드가 더 간결하고 읽기 쉬워진다. 상대경로(../../components/Header)를 사용할 경우, 디렉터리 구조가 변경되면 모든 임포트 경로를 수정해야 하는 번거로움이 생긴다. 절대경로는 이를 방지하며, 프로젝트의 유지보수성을 높여준다. 또한, 경로에 별칭을 설정하면 특정 디렉터리의 경로를 명확히 표현할 수 있다. 이러한 방식은 특히 대규모 프로젝트에서 효율적이다.

 

 

🎯 Q19. React 에서 State, Props 그리고 Ref 각각의 용례에 대해 설명하세요.

 

  • State: 컴포넌트 내부에서 관리되는 동적인 데이터로, UI를 동적으로 변경할 때 사용된다. 예를 들어, 사용자 입력값이나 토글 상태를 저장한다.
  • Props: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. 데이터는 읽기 전용으로 전달되며, 자식 컴포넌트에서 수정할 수 없다.
  • Ref: DOM 요소나 컴포넌트 인스턴스에 직접 접근할 때 사용된다. 예를 들어, 포커스 제어나 특정 DOM 요소의 크기 측정을 할 때 유용하다.

 

 

 

🎯 Q20. SetState 의 비동기 특성이 무엇인지 설명하세요.

setState는 비동기적으로 작동하여 상태 업데이트 후 바로 값이 변경되지 않을 수 있다. React는 성능을 위해 여러 상태 업데이트를 하나로 합쳐 처리하는 배치(batch) 작업을 수행한다. 이로 인해 상태 변경 후 바로 값을 확인하려면 콜백 함수나 useEffect를 사용해야 한다. 비동기 특성은 불필요한 렌더링을 줄여 성능을 최적화하지만, 예상치 못한 동작을 초래할 수 있어 주의가 필요하다. 

 

반응형