React 면접 질문 & 모범 답변

React는 현재 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나예요. 거의 모든 회사에서 React 관련 질문을 물어보죠. 실무에서 정말 중요한 React 개념들을 질문과 답변 형식으로 정리해봤습니다.

React 기본 개념

1. React가 무엇이고 왜 사용하나요? React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리예요. 컴포넌트 기반으로 개발할 수 있어서 코드 재사용성이 높고, Virtual DOM을 사용해서 성능도 좋아요. 마치 레고 블록처럼 작은 조각들을 조합해서 큰 화면을 만드는 방식이라고 생각하시면 됩니다.

2. Virtual DOM이 무엇이고 왜 빠른가요? 실제 DOM을 JavaScript 객체로 표현한 것이 Virtual DOM이에요. 상태가 변경되면 새로운 Virtual DOM을 만들고, 이전 것과 비교해서 달라진 부분만 실제 DOM에 반영해요. 마치 건물 전체를 다시 짓지 않고 바뀐 방만 리모델링하는 것과 같아요.

3. JSX가 무엇인가요? JavaScript 안에서 HTML처럼 작성할 수 있게 해주는 문법 확장이에요. 실제로는 Babel이 일반 JavaScript로 변환해줍니다. 코드가 더 직관적이고 읽기 쉬워져요.

4. 함수형 컴포넌트와 클래스 컴포넌트의 차이는? 함수형 컴포넌트는 단순한 함수로 작성하고, 클래스 컴포넌트는 class 문법을 사용해요. Hooks가 나온 이후로는 함수형 컴포넌트를 더 많이 사용합니다. 함수형이 더 간결하고 테스트하기도 쉬워요.

State와 Props

5. State와 Props의 차이점은? Props는 부모 컴포넌트에서 자식으로 전달하는 데이터고, State는 컴포넌트 내부에서 관리하는 데이터예요. Props는 읽기 전용이고, State는 변경 가능해요. 마치 Props는 편지(받은 그대로 읽기만), State는 일기(내가 쓰고 수정)라고 생각하면 됩니다.

6. setState는 동기인가요 비동기인가요? 비동기예요. React는 성능을 위해 여러 setState 호출을 하나로 묶어서 처리해요. 그래서 setState 직후에 state 값을 확인하면 이전 값이 나올 수 있어요.

7. useState Hook은 어떻게 동작하나요? 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook이에요. 현재 상태값과 그것을 업데이트하는 함수를 배열로 반환해줍니다. 컴포넌트가 리렌더링되어도 상태값은 유지돼요.

생명주기와 Effect

8. useEffect는 언제 사용하나요? 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행할 코드가 있을 때 사용해요. API 호출, 타이머 설정, DOM 조작 등을 할 때 쓰입니다. 두 번째 인자인 dependency array로 언제 실행할지 제어할 수 있어요.

9. useEffect의 클린업 함수는 왜 필요한가요? 메모리 누수를 방지하기 위해서예요. 타이머, 이벤트 리스너, API 요청 등은 컴포넌트가 사라질 때 정리해줘야 해요. 마치 방을 나갈 때 불을 끄는 것처럼 정리가 필요해요.

10. 의존성 배열을 빈 배열로 두면 어떻게 되나요? 컴포넌트가 처음 마운트될 때만 실행되고, 언마운트될 때 클린업 함수가 실행돼요. 마치 componentDidMount와 componentWillUnmount를 합친 것과 같아요.

이런 React의 핵심 개념들을 정확히 이해하고 실제 프로젝트에서 어떻게 활용했는지 예시를 들 수 있다면, 면접관에게 좋은 인상을 줄 수 있을 거예요. 다음에는 Next.js 관련 질문들을 다뤄보겠습니다.