2. JSX 사용법(코딩애플)

JSX : HTML 문법을 JavaScript 코드 내부에 쓴 것.

 

"React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰)
즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다.

 

 

return 안에 html 코딩하기.

 

1. 태그에 class 주기 : 예약어 class랑 겹치기 때문에 className 사용. 

<div className="클래스명">

css는 .App.css에서 코딩하기. (css하듯이 똑같이 하면 됨)

 

JSX에 style속성 집어넣는 법 

style = {object 자료형으로 만든 스타일}

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

// 자바스크립트에선 대쉬기호 못씀.camelCase작명관습에 따라 속성명 바꿔야됨
// ( font-size -> fontSize )

 

 

2. 리액트에서 데이터바인딩 하기 (리액트의 최고 장점)

데이터바인딩?

서버에서 데이터를 html에 꽂아넣는 것

 

변수 지정 후 { 변수명 }

변수 posts가 h4사이에 출력된 모습

함수도 넣을 수 있다. { 함수() }

이미지도 넣을 수 있다. ( 이미지 import 후 { 이미지이름 } )