[React] CH02. JSX 이용하여 HTML 페이지 제작

App.js : 메인페이지에 들어갈 HTML 짜는 곳
App.css : 메인페이지 CSS 짜는 곳
JSX : 자바스크립트 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 리액트 기본 내장 문법

 

1. 태그에 class 지정 

<div className="클래스명">

 

2. 리액트가 HTML코딩보다 편리한 이유

• 데이터 바인딩이 쉽다
  ex) React, Angualr, Vue

전통적 자바스크립트 데이터 바인딩	리액트 데이터 바인딩
document.getElementById().innerHTML = '';	# 리액드 데이터 바인딩 ⇒ {변수명, 함수 등} // src, id, href등 속성에서의 데이터 바인딩 <img src={logo}/> <div className={posts}>개발 Blog</div> // 변수명 데이터 바인딩 <h4>{posts}</h4> // 함수 데이터 바인딩 <h4>{함수()}</h4>

데이터 바인딩
: 동적인 데이터를 처리
: 서버에서 가져온 데이터를 자바 스크립트로 저장하여 HTML를 꽂아넣는 것 

이미지 가져오기
1. <img src=""이미지이름.jpg">로 직접 이미지 넣기
2. import 이미지변수명 from './이미지.jpg'로 임포트 시키고 <img src={이미지변수명}>로 데이터 바인딩

 

3. JSX에서 style 속성 집어 넣기

• HTML 방식처럼 style ⇒ 오류

# 오류 발생
<div style="font-size:16px">개발 Blog</div>

 

• style={ object 자료형으로 만든 스타일 }
  - 속성명 : camelCase 작명 관습

<div style={ {color: 'blue', fontSize: '30px'} }>개발 Blog</div>

// 위 결과 = 아래 결과
let css = { color: 'blue', fontSize: '30px' }
<div style={ css }>개발 Blog</div>

---

[ 참고 ]

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

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