React 기초
JSX, components, props, state, 이벤트, 조건부 렌더링, 리스트와 keys
20 면접 질문·
Junior
1React에서 JSX란 무엇입니까?
1
React에서 JSX란 무엇입니까?
답변
JSX는 HTML과 유사한 마크업을 JavaScript 코드 내에 직접 작성할 수 있게 해주는 JavaScript 구문 확장입니다. 컴파일 시 Babel에 의해 React.createElement 함수 호출로 변환됩니다. JSX를 사용하면 코드가 더 읽기 쉬워지고, 타이핑을 통한 컴파일 시점 오류 감지가 가능해지며, JavaScript의 강력함과 친숙한 구문을 결합할 수 있습니다.
2JSX에서 JavaScript 표현식을 사용하기 위한 올바른 구문은 무엇입니까?
2
JSX에서 JavaScript 표현식을 사용하기 위한 올바른 구문은 무엇입니까?
답변
단일 중괄호를 사용하면 변수, 함수 또는 계산과 같은 유효한 JavaScript 표현식을 JSX에 통합할 수 있습니다. 이 구문은 JSX 마크업과 동적 JavaScript 코드 사이에 명확한 경계를 만듭니다. 이중 중괄호는 인라인 스타일 객체에, 소괄호는 여러 줄의 JSX 그룹화에, 대괄호는 JavaScript 배열에 사용됩니다.
3JSX의 className과 HTML의 class의 주요 차이점은 무엇입니까?
3
JSX의 className과 HTML의 class의 주요 차이점은 무엇입니까?
답변
JSX는 class 대신 className을 사용합니다. class가 ES6 클래스를 선언하기 위한 JavaScript 예약어이기 때문입니다. JSX는 JavaScript로 변환되므로, class를 사용하면 구문 충돌이 발생합니다. 마찬가지로 for는 htmlFor가 되고, 이벤트는 camelCase를 사용합니다. 이 규칙 덕분에 JSX는 HTML과 유사한 구문을 제공하면서도 유효한 JavaScript로 유지됩니다.
4
JSX 코드에서 주석을 작성하는 방법은 무엇입니까?
5
React에서 functional component란 무엇입니까?
+17 면접 질문
기타 React / Next.js 면접 주제
JavaScript 기초
Junior
25개 질문React Hooks
Junior
22개 질문컴포넌트 라이프사이클
Junior
18개 질문React Router
Junior
20개 질문Context를 활용한 상태 관리
Junior
18개 질문폼과 Controlled Components
Mid-Level
20개 질문데이터 가져오기 및 API
Mid-Level
20개 질문React Query (TanStack Query)
Mid-Level
20개 질문Styling & CSS-in-JS
Mid-Level
18개 질문Next.js 기초
Mid-Level
25개 질문TypeScript와 React
Mid-Level
20개 질문Next.js 데이터 페칭
Mid-Level
24개 질문Next.js Server Actions
Mid-Level
20개 질문Next.js 라우팅 및 내비게이션
Mid-Level
22개 질문Next.js API Routes
Mid-Level
20개 질문Next.js Metadata & SEO
Mid-Level
18개 질문Next.js Middleware 및 Auth
Mid-Level
22개 질문React 테스트
Mid-Level
20개 질문Zustand State Management
Mid-Level
18개 질문React 성능 최적화
Senior
22개 질문Error Boundaries & 에러 핸들링
Senior
18개 질문Advanced React Patterns
Senior
20개 질문Next.js 고급 기능
Senior
24개 질문Next.js 배포 및 프로덕션
Senior
20개 질문아키텍처 & 디자인 패턴
Senior
22개 질문React Server Components
Senior
26개 질문Next.js 국제화
Senior
20개 질문React 보안 & 모범 사례
Senior
22개 질문