리엑트(React)는 네이버, 카카오, 쿠팡, 배달의 민족 등 국내 기업에서 가장 많이 쓰이는 프론트엔드 기반 기술입니다.
현재 리액트 기술 면접 준비를 하고 계시다면 이번 아티클에 주목해주세요. 많이 물어보시는 리액트 기술 면접 질문을 추렸습니다. 예상 질문부터 수강생의 답변과 멘토님의 피드백까지 한눈에 확인해보세요.
목차
Q (1). 상태 관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?Q (2). Redux가 무엇인가요, 왜 Redux를 사용하시나요?Q (3). Redux말고 다른 전역 상태 관리에 대해 아는 것 하나와 차이점을 말해주세요.Q (4). 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.🚢 개발자 취업 준비 어떻게 시작해야 할지 모르겠나요? 취업으로 향하는 거친 항해에서 든든한 메이트가 되어 드리겠습니다.
Q (1). 상태 관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
핵심 키워드: 리렌더링, 컴포넌트, 로컬 / 지역 상태
🧑💻 수강생 답변
리액트에서는 상태(state)가 변화하면 렌더링이 일어납니다. 서로 다른 두 컴포넌트에 같은 데이터가 필요할 때, 각 컴포넌트 간 부모-자식 관계가 아닌 이상 직접적인 데이터 전달이 어렵고, 상태가 많아지고 복잡해질수록 props 추적이 어려워집니다.(props drilling 현상). 그래서 간단한 작업은 useState 같은 리액트 훅을 사용하여 컴포넌트의 상태를 관리하고, 규모가 큰 컴포넌트 상태 관리는 state를 전역변수처럼 만들어 모든 컴포넌트에 상태를 전달해주지 않고도 어떤 컴포넌트에서든 바로 state에 접근할 수 있게 해주는 redux 와 같은 상태 관리 라이브러리를 사용할 수 있습니다.
🗣️멘토님 피드백
리액트가 상태 관리를 하는 이유는 리렌더링 여부를 판단하기 위함인데, 이 부분에 대해서 잘 설명하셨습니다. 지역 상태만 사용하면 어떤 문제가 발생하는지부터 전역 상태 라이브러리를 사용하는 이유까지 잘 드러난 답변입니다.
😄 좋은 부분
- 리액트에서는 상태(state)가 변화하면 렌더링이 일어납니다.
- 직접적인 데이터 전달이 어렵고, 상태가 많아지고 복잡해질 수록 props 추적이 어려워집니다
- 어떤 컴포넌트에서든 바로 state에 접근할 수 있게 해주는 redux 와 같은 상태 관리 라이브러리를 사용할 수 있습니다.
Q (2). Redux가 무엇인가요, 왜 Redux를 사용하시나요?
핵심 키워드: useState, 보일러 플레이트, 부모 - 자식 컴포넌트, 리렌더링
🧑💻 수강생 답변
리덕스는 전역 상태 관리 라이브러리로서 쉽게 말해 "중앙 state 관리소" 역할을 하는 라이브러리입니다.리덕스를 사용하는 이유는 크게 2가지가 있다고 생각합니다. 먼저, ‘useState의 불편함' 입니다.예를 들어 A라는 컴포넌트에서 C라는 컴포넌트로 state 값을 전달해주기 위해서는 반드시 부모-자식 관계가 되어야 하는데 만약 그 사이에 B 컴포넌트가 있다면 B 컴포넌트에선 그 state를 사용하지 않더라도 무조건 받아서 C 컴포넌트로 props를 내려줘야 하는 불편함이 있습니다. 두번째는 'Global state의 편리함' 입니다. 중앙 state 관리소에서 생성된 state들을 의미하는데 이 state들을 필요로 하는 컴포넌트가 어디에 위치하고 있든 간에 상관없이 state 불러올 수 있다는 장점이 있습니다.
🗣️ 멘토님 피드백
리덕스 라이브러리에 대한 설명과 장점을 잘 이야기해주고 있습니다. 다만, 리덕스 라이브러리는 단점까지 함께 추가해준다면 더 정확한 답변이 완성될 수 있습니다.
😄 좋은 부분
- ‘UseState의 불편함'
- 'Global state의 편리함'
Q (3). Redux말고 다른 전역 상태 관리에 대해 아는 것 하나와 차이점을 말해주세요.
핵심 키워드: recoil - selector, 캐싱, jotai - atom, read / write
🧑💻 수강생 답변
Recoil은 Context API 기반으로 구현된 함수형 컴포넌트에서만 사용 가능한 라이브러리입니다. Recoil은 비동기 처리를 기반으로 작성되어 동시성 모드를 제공하기 때문에, Redux와 같이 다른 비동기 처리 라이브러리에 의존할 필요가 없습니다. atom->selector 를 거쳐 컴포넌트로 전달되는 하나의 데이터플로우를 가지고 있어 복잡하지 않은 상태 구조로 되 있고, 이 두 개념 정도만 알고도 어느 정도 구현이 가능하므로 개념이 간단하고 러닝커브가 낮아 초기학습이 상대적으로 쉽습니다. 그러나 아직 상대적으로 새로운 상태관리 도구기 때문에 커뮤니티가 활발하지 않습니다. Recoil의 강점은 리액트의 useState 훅과 비슷하게 동작하는, 직관적이면서 간단한 구조로 되어 있어서 코드의 양이 매우 줄어들게 되는 장점을 가지고 있다는 점입니다. 그래서 대규모 상태를 관리해야 하는 프로젝트에는 Redux가 더 적합합니다. 그러나 프로젝트가 대규모가 아닐 경우, recoil이 더 직관적이고 간단한 구조를 가졌기에 유리한 부분이 있습니다.
🗣️멘토님 피드백
Recoil의 장점과 단점을 들어 언제, 어떻게 쓰면 좋을지 잘 서술했고, Recoil과 Redux 비교 설명도 아주 잘했습니다.
😄 좋은 부분
- Recoil은 비동기 처리를 기반으로 작성되어 동시성 모드를 제공하기 때문에, Redux와 같이 다른 비동기 처리 라이브러리에 의존할 필요가 없습니다.
- 대규모 상태를 관리해야 하는 프로젝트에는 Redux가 더 적합합니다. 그러나 프로젝트가 대규모가 아닐 경우, recoil이 더 직관적이고 간단한 구조를 가졌기에 유리한 부분이 있습니다.
Q (4). 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
핵심 키워드: tree , 성능, 전체 / 부분 렌더
🧑💻 수강생 답변
“먼저, 돔이란 브라우저를 구성하는 수많은 페이지(document)를 이루는 element를 tree 형태로 표현한 것을 의미합니다.그리고 그 tree의 요소 하나하나를 '노드' 라고 하는데 각각의 노드는 접근과 제어를 할 수 있는 API를 제공합니다.그래서 리얼 돔의 트리형태를 그대로 가져온 복사본 형태가 가상 돔입니다.” 리얼 돔은 돔 요소를 조작하는 반면에, 가상 돔은 돔 요소를 객체 형태로 메모리에 저장하기 때문에 실제 돔을 조작하는 것보다 훨씬 빠르게 조작을 수행할 수 있습니다. 즉, 실제 돔을 조작하는 것보다 메모리상에 올라와 있는 자바스크립트 객체를 변경하는 작업이 훨씬 더 가벼우므로 가상돔을 사용합니다. 그래서 리액트는 가상 돔을 이용해서 리얼 돔을 변경하는 작업을 상당히 효율적으로 수행합니다.
🗣️ 멘토님 피드백
기본적으로 잘 설명했지만, 돔과 트리에 대한 설명은 불필요합니다. 면접때는 질문에 대한 핵심만 간결하게 답변하는 것이 가장 좋습니다. 이 부분만 제외하면 기본적으로 잘 설명한 답변입니다.
🤔 아쉬운 부분
- “먼저, 돔이란 브라우저를 구성하는 수많은 페이지(document)를 이루는 element를 tree 형태로 표현한 것을 의미합니다.그리고 그 tree의 요소 하나하나를 '노드' 라고 하는데 각각의 노드는 접근과 제어를 할 수 있는 API를 제공합니다.”
리액트(React) 기술 면접 질문, 도움이 되셨나요? 기술면접 대비는 현직 개발자의 시선에서 어떤 답변이 좋은지 파악할 수 있어서 취업 리부트 코스 수강생들의 만족도가 가장 높은 세션 중 하나인데요. 앞으로도 React, Spring의 기술면접 Q&A를 꾸준히 발행할 예정이니, 관심이 있다면 항해99 블로그를 구독해주세요.
🚢 개발자 취업 준비 어떻게 시작해야 할지 모르겠나요? 취업으로 향하는 거친 항해에서 든든한 메이트가 되어 드리겠습니다.
취업 실패 시 교육비 0원. 반드시 취업까지 책임질 수 있다는 항해의 자신감입니다.
높은 수준의 개인 프로젝트 경험이 없는 개발 유관 전공자, 전반적인 학습이 부족한 부트캠프 수료생이라면 개발자 취업 리부트 코스에 합류하세요. 자료구조 공부, 프로젝트, 코테준비, 이력서와 면접 대비까지 취업 리부트 코스에서 한 번에 할 수 있습니다. 갈수록 높아지는 개발자 취업의 벽, 개발자 취업 리부트 코스로 11주 만에 취업의 문을 열어 보세요
CREDIT
글 | 송민영 팀스파르타 에디터
Share article
Subscribe to our newsletter