본 자료는 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

JSX

JSX란?

• JSX는 함수호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장
• JSX는 Babel에 의해 Transcompile된다.

JSX의 장점

• 개발자 편의성 향상
• 협업에 용이 / 생산성 향상
• 문법오류와 코드량 감소

JSX의 특징 / HTML과 차이점

• HTML 태그 내에 JavaScript 연산
• class $\rarr$ className으로 이름이 변경
• 스타일은 object로 표현
• 닫는 태그 필수
• 최상단 element는 반드시 하나만 입력해야한다.

컴포넌트

Component란?

• React에서 페이지를 구성하는 최소단위
• Component의 이름은 대문자로 시작
• Class Component / Function Component로 나뉜다
• Controlled Component / Uncontrolled Component

Class Component 특징

• Class 개념이 많이 활용되는 Java 개발자에게 친숙한 형태
• React의 생명주기를 파악하기 쉽다.

Component의 특징

• 컴포넌트끼리 데이터를 주고받을 땐 Props
• 컴포넌트 내에세 데이터를 관리할 땐 State
• 데이터는 부모 $\rarr$ 자식으로만 전달