React - JSX

JSX ??

• javaScript 확장 버전으로 syntax extension for JavaScript라고 합니다. HTML과 아주 비슷하게 생겼고 javascript 파일 내에서 작성할 수 있습니다.

  var a = (

  Welcome to CodeLab
  );

• ""으로 감싸지 않고 소괄호 () 를 사용합니다.

1. Nested Element

/*에러발생코드*/
render() {
	return (
		<h1>Hi<h1/>
		<h2>I am Error</h2>
  );
}

//정상적으로 사용을 원한다면 렌더링 할때 꼭! 감싸는 태그를 추가하여 안에 넣어준다.
/*두개 이상의 태그는 하나의 태그에 감싸져야 한다.*/
render() {
	return (
		<div>
			<h1>use</h1>
			<h2>Correct</h2>
		</div>
	);	
}

/*감싸지않고 불필요한 태그를 만들어서 감싸기 싫다면?*/

<> /*<-이렇게 비어서 태그를 만들자*/ 
elements...
</>

2. JavaScript Expression (JSX 내부에서 Js를 사용하는 방법 )

/*JSX안에서 JavaScript를 표현하는 방법은 간단합니다.
 그냥 **{} 안에 넣으면 됩니다***/

render() {
	let text = 'Hello React";
  return (
		<div>{text}</div>
	);
}

/*if Else 문은 JSX에서 사용이 불가합니다. 이에 대한 대안은  */

3. inline Style

/*JSX 안에서 Style을 설정할때는, String 형식을 사용하지 않고
key가 camelCase인 **"객체"**가 사용됩니다.*/

render() {
	let style = {
		color : 'aqua',
		backgroundColor : 'black'
	}
	return (
		<div style = {style}>blabla</div>
	);
}

/*JSX 안에서 class를 설정 할 때는 class가 아닌 className을 사용 */
render () {
	return(
		<div className = 'box'>React</div>
	);
}

4. Comments (주석)

/* JSX안에서 주석을 작성할 때는
	 **{/*내용*/}
	 형식으로 작성하세요**
*/

/*주의할 점은 주석 역시 container element 안에 주석이 작성되어야 합니다.*/

정리

1. 태그는 꼭 닫혀야 한다!

   <div>태그는 꼭 닫혀야 합니다!</div>
   			<Hello /> <-- 닫을 태그가 없다면 셀프 클로징!

2. 두개 이상의 태그는 감싸자!

   <>
   	<h1>두개 이상의 태그는?</h1>
   	<p>꼭 감싸자</p>
   </>

3. JavaScript 값 보여줄 땐, 중괄호!

   const name = '홍길동';
   return <div> Js값 보여줄 땐 {name} </div>
   결과 -> Js값 보여줄 땐 홍길동

4. css 인라인 스타일로 꾸밀 땐 "객체" 형태로!

   const style = {
   	backgroud : 'gray',
   }
   return (
   	<div style= {style}>
   		<div className = 'hey'>
   		className과 스타일
   		</div>
   	</div>
   )