백과
블로그
블로그
스택 시리즈
소개
로그인
백과 블로그
메뉴 열기
로그인
[React] 리액트 알아보기: 컴포넌트와 JSX 알아보기
React
JSX
TSX
[React] 리액트 알아보기: 컴포넌트와 JSX 알아보기
백과
2026년 3월 8일
5분 읽기
목차
⚛️ 리액트 : 컴포넌트(Component)와 JSX
🧱 컴포넌트(Component)
컴포넌트의 주요 장점
❗ 순수 Html 과 JS 로는 컴포넌트를 구현할 수 없는가?
React와 순수 JS 컴포넌트의 가장 큰 차이점
✨ JS + HTML = JSX(TSX)
왜 JSX를 사용할까요?
JS 로 짠다면?
📜 JSX 핵심 규칙 3가지
반드시 하나의 부모 요소로 감싸야 한다
모든 태그는 닫혀야 한다
속성 이름은 카멜 케이스(camelCase)로 작성
🚨 규칙을 어겼을 때 발생하는 문제들
💡 주요 속성 변환 규칙 요약
💡 JSX 안에서 자바스크립트 변수 사용하기
🎨 인라인 스타일(Inline Style) 작성 시 주의할 점: 중괄호 두 개 {{ }}
🔗 참고 자료
스택 시리즈
[React] 리액트 스택