# React 기초 (React / Next.js)

> JSX, components, props, state, 이벤트, 조건부 렌더링, 리스트와 keys

- 20 면접 질문
- Junior
- [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md)

## 1. React에서 JSX란 무엇입니까?

**답변**

JSX는 HTML과 유사한 마크업을 JavaScript 코드 내에 직접 작성할 수 있게 해주는 JavaScript 구문 확장입니다. 컴파일 시 Babel에 의해 React.createElement 함수 호출로 변환됩니다. JSX를 사용하면 코드가 더 읽기 쉬워지고, 타이핑을 통한 컴파일 시점 오류 감지가 가능해지며, JavaScript의 강력함과 친숙한 구문을 결합할 수 있습니다.

## 2. JSX에서 JavaScript 표현식을 사용하기 위한 올바른 구문은 무엇입니까?

**답변**

단일 중괄호를 사용하면 변수, 함수 또는 계산과 같은 유효한 JavaScript 표현식을 JSX에 통합할 수 있습니다. 이 구문은 JSX 마크업과 동적 JavaScript 코드 사이에 명확한 경계를 만듭니다. 이중 중괄호는 인라인 스타일 객체에, 소괄호는 여러 줄의 JSX 그룹화에, 대괄호는 JavaScript 배열에 사용됩니다.

## 3. JSX의 className과 HTML의 class의 주요 차이점은 무엇입니까?

**답변**

JSX는 class 대신 className을 사용합니다. class가 ES6 클래스를 선언하기 위한 JavaScript 예약어이기 때문입니다. JSX는 JavaScript로 변환되므로, class를 사용하면 구문 충돌이 발생합니다. 마찬가지로 for는 htmlFor가 되고, 이벤트는 camelCase를 사용합니다. 이 규칙 덕분에 JSX는 HTML과 유사한 구문을 제공하면서도 유효한 JavaScript로 유지됩니다.

## 17개 추가 질문 이용 가능

- JSX 코드에서 주석을 작성하는 방법은 무엇입니까?
- React에서 functional component란 무엇입니까?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React / Next.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior
- [컴포넌트 라이프사이클](https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle.md): 18개 질문, Junior
- [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior
- [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior
- [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level
- [데이터 가져오기 및 API](https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api.md): 20개 질문, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level
- [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level
- [TypeScript와 React](https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react.md): 20개 질문, Mid-Level
- [Next.js 데이터 페칭](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24개 질문, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level
- [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18개 질문, Mid-Level
- [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level
- [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level
- [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior
- [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior
- [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior
- [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior
- [Next.js 배포 및 프로덕션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20개 질문, Senior
- [아키텍처 & 디자인 패턴](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns.md): 22개 질문, Senior
- [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior
- [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior
- [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals