React 신입 개발자 기술면접

React는 Facebook에서 개발한 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI 요소를 만들 수 있습니다. Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 최적화합니다. 단방향 데이터 흐름을 채택하여 데이터 관리가 예측 가능하고 디버깅이 쉽습니다. 프레임워크가 아닌 라이브러리이기 때문에 라우팅, 상태관리 등은 별도 라이브러리를 선택할 수 있는 유연성이 있습니다.

HTTP는 암호화되지 않은 평문으로 데이터를 전송하는 프로토콜이고, HTTPS는 SSL/TLS를 통해 암호화된 통신을 제공하는 프로토콜입니다. HTTPS는 데이터가 중간에 가로채져도 내용을 알 수 없도록 암호화하여 보안을 강화합니다. 사용자의 개인정보, 로그인 정보, 결제 정보 등 민감한 데이터를 안전하게 전송할 수 있습니다. 최근에는 SEO 순위에도 영향을 미치며, 브라우저에서 HTTP 사이트에 경고를 표시하기도 합니다.

useState는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook으로, 상태 값과 그 값을 업데이트하는 함수를 반환합니다. 예를 들어 버튼 클릭 카운터나 입력 폼의 값을 관리할 때 사용합니다. useEffect는 컴포넌트의 사이드 이펙트를 처리하는 Hook으로, 데이터 fetching, 구독 설정, DOM 직접 조작 등에 사용됩니다. 컴포넌트가 렌더링된 후 실행되며, 의존성 배열을 통해 실행 시점을 제어할 수 있습니다. 빈 배열을 전달하면 컴포넌트 마운트 시 한 번만 실행되고, cleanup 함수를 반환하여 언마운트 시 정리 작업을 수행할 수 있습니다.

배열은 순서가 있는 데이터 집합으로 인덱스를 통해 접근하며, 동일한 타입의 여러 값을 순차적으로 저장할 때 사용합니다. 객체는 키-값 쌍으로 데이터를 저장하며, 의미 있는 이름(키)으로 데이터에 접근할 수 있습니다. 배열은 순서가 중요한 목록 데이터(사용자 목록, 댓글 목록 등)에 적합하고, 객체는 속성이 명확한 단일 엔티티(사용자 정보, 설정 값 등)를 표현할 때 적합합니다. React에서는 리스트 렌더링 시 배열의 map 메서드를 자주 사용하고, 컴포넌트의 props나 state는 주로 객체 형태로 관리합니다.

리스트 항목이 너무 많아 한 번에 모든 DOM을 렌더링하면서 성능 문제가 발생할 수 있습니다. React.memo를 사용하여 props가 변경되지 않은 컴포넌트의 리렌더링을 방지할 수 있습니다. 가상 스크롤링(Virtualization)을 적용하여 화면에 보이는 항목만 렌더링하는 react-window나 react-virtualized 라이브러리를 사용할 수 있습니다. key prop을 고유한 값(id)으로 설정하여 React가 항목을 정확하게 식별하도록 해야 합니다. 무거운 연산이 있다면 useMemo를 사용하여 결과를 메모이제이션하는 것도 도움이 됩니다.

Props는 부모 컴포넌트로부터 전달받는 읽기 전용 데이터로, 컴포넌트 내부에서 수정할 수 없습니다. State는 컴포넌트 내부에서 관리하는 변경 가능한 데이터로, setState나 useState를 통해 업데이트할 수 있습니다. Props는 컴포넌트 간 데이터를 전달하거나 재사용 가능한 컴포넌트를 만들 때 사용합니다. State는 사용자 입력, 토글 상태, API 응답 등 시간에 따라 변하는 데이터를 관리할 때 사용합니다. Props가 변경되면 컴포넌트가 리렌더링되고, State가 변경되어도 컴포넌트가 리렌더링됩니다.

XSS는 공격자가 악의적인 스크립트를 웹페이지에 삽입하여 다른 사용자의 브라우저에서 실행시키는 공격입니다. 사용자의 쿠키나 세션을 탈취하거나 악성 행위를 수행할 수 있습니다. React는 기본적으로 JSX에서 모든 값을 렌더링하기 전에 이스케이프 처리하여 XSS를 방지합니다. 하지만 dangerouslySetInnerHTML을 사용하면 이 보호가 우회되므로 신뢰할 수 없는 데이터에는 절대 사용하지 않아야 합니다. 사용자 입력을 받을 때는 서버 측에서도 검증과 sanitization을 수행해야 합니다.

Promise는 비동기 작업의 결과를 나타내는 객체로, then과 catch 메서드 체이닝으로 처리합니다. async/await는 Promise를 더 동기적인 코드처럼 작성할 수 있게 해주는 문법적 설탕입니다. async/await를 사용하면 코드 가독성이 높아지고 try-catch로 에러를 처리할 수 있어 직관적입니다. React에서는 useEffect 내부에서 async 함수를 정의하고 호출하는 방식으로 데이터를 fetching합니다. useEffect 콜백 자체를 async로 만들 수는 없으므로 내부에 별도 async 함수를 선언해야 합니다.

테스트는 코드 변경 시 기존 기능이 정상 동작하는지 자동으로 검증하여 버그를 조기에 발견할 수 있게 합니다. 리팩토링이나 새 기능 추가 시 안정성을 보장하고, 코드의 의도를 문서화하는 역할도 합니다. React에서는 Jest를 테스트 러너로, React Testing Library를 컴포넌트 테스트 라이브러리로 주로 사용합니다. React Testing Library는 사용자 관점에서 컴포넌트를 테스트하도록 설계되어 실제 사용 시나리오를 검증할 수 있습니다. 렌더링 결과, 이벤트 핸들링, 상태 변화 등을 테스트할 수 있습니다.

상황(Situation)을 설명하며 어떤 개념이 어려웠는지 구체적으로 언급합니다. 과제(Task)로 그 개념을 이해하기 위해 무엇을 해야 했는지 설명합니다. 행동(Action)으로 공식 문서 읽기, 토이 프로젝트 만들기, 커뮤니티 질문하기 등 실제로 취한 학습 방법을 상세히 설명합니다. 결과(Result)로 그 개념을 어떻게 이해하게 되었고, 프로젝트에 어떻게 적용했는지 구체적인 성과를 말합니다. 이 경험을 통해 배운 점이나 앞으로의 학습 자세를 덧붙이면 좋습니다.