3. React.js 입문

< vite >

● 차세대 프론트엔드 개발 툴 

● 기본 설정이 적용된 React App 생성 가능

● React 공식 문서에서도 권장

[React App 구동]

 

[ JSX로 UI 표현하기 ]

◆ JSX 주의사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.

2. 숫자, 문자열, 배열 값만 렌더링 된다.

3. 모든 태그는 닫혀 있어야 한다.

4. 최상위 태그는 반드시 하나여야 한다

 

[ Props로 데이터 전달하기]

1. Button 컴포넌트에 Spread 방식으로 데이터 전달할 수 있음

2. Button 컴포넌트 내에서 color 변수가 안들어왓는데 toUpperCase()를 호출하면 에러가 날 수 있기 때문에 defaultProps로 디폴트 값을 설정할 수 있음

 

 

[ 이벤트 처리하기]

Event Handling - 이벤트가 발생했을 때 그것을 처리하는 것

 

아래 console 창에 출력되는 객체는 Synthetic Event 객체로 합성 이벤트 객체(모든 브라우저에서 이벤트 객체를 하나로 통일한 형태) 라고 한다. 모든 브라우저에서 통합된 규격의 이벤트 객체라고 보면 된다.