[React] 리액트에서 레이아웃 만들 때 쓰는 JSX문법 3개

JSX 문법1. class 넣을 땐 className

App.js 파일

 

App.css 파일

  기존 html에서는 태그 내에 class 라는 속성을 사용했었는데, JSX에서는 className이라고 속성을 사용한다.

 

JSX 문법2. 변수 넣을땐 {중괄호}

  서버에서 또는 js파일 내부에서 변수를 끌어다 쓸 때는 {중괄호}를 사용한다.

 

JSX 문법3. style 넣을 땐 무조껀 style={{스타일명:'값'}}

 기존 html과 달리 JSX에서는 중괄호 내에 스타일 속성들을 입력해야한다.

 또한 오브젝트 형식으로서, style 중괄호 안에 다른 중괄호를 다시 작성해줘야한다. 

 

<결과화면>

 

에러 검사하는 방법

1. Visual Code 에서의 터미널 확인

2. 브라우저에 출력된 페이지에서 '개발자도구(F12) -> Console' 들어가서 에러메시지 확인

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌