[REACT자습서.01] React JSX

https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

위와같은 react 자습서를 기반으로 작성하였습니다.

 

1. 함수 호출

function formatName(user){
	return user.firstName +' ' + user.lastName;
}

const user = {
	firstName:'Harry',
    lastName:'Potter'
}

const element = (
	<h1>
    	Hello, {formatName(user)};
	</h1>
}

formatName에서 user을 받아와, user.firstName 과 lastName을 출력해준다.
user은 firstName과 lastName을 attribute로 가지고 있다.
element가 실행되면, hello 와 함께 {함수 fromatName(user)}이 호출 된다.

 

2. JSX 속성 정의

const element = <img src ={user.avatarUrl}></img>
const element = < a href = "http://www.reactjs.org">link</a>

-" "는 문자열 값에 사용, { } 표현식에 사용. 둘다는 사용금지

HTML attribute 대신에 camelCase proprty 명명 규칙을 사용한다.
(ex) class -> className, tabindex -> tabIndex 로 정의해준다.

 

 

3. JSX로 자식 정의

const element = <img src ={user.avatarUrl} />

태그란 <><> 사이에 들어가는 script 를 의미한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/script

<script>: 스크립트 요소 - HTML: Hypertext Markup Language | MDN

태그가 없으면 바로 닫아줘야한다.

const element = {
	<div>
    	<h1>Hello!</h1>
	<h2> Good To see you here.</h2>
	</div>
}

jsx 태그는 자식을 포함 할 수 있다. 즉, div 태그가 자식으로 h1&h2를 가지고 있는 형태이다.

const element = {
	<h1 className = "greetng">
		hello, world!
	</h1>
}

const element = React.createElement(
	'h1',
	{className: 'greeting'},
	'hello, world'
}

javascript로 나타낸걸 , reactDOM으로 변형하면 아래와 같은 형태로 이룬다.  구조를 단순화 하면

const element = {
	type:'h1',
	props: {
		className: 'greeting',
		children:'hello, world'
	}
}

이와 같은 객체를 React Element라고 한다. 화면에서 보고싶은것을 나타내는 표현이다. 이 객체를 읽어서 DOM 형태를 나타낸다.