[모각코]React Js 시작하기(2)

 

이번회차의 경우 React JS의 기본문법이 되는 JSX에 대해서 학습하였다.

JSX란?

javascript를 확장한 문법으로써 xml과 굉장히 유사하게 생긴 친구이다.

코드가 브라우저에서 실행되기 이전인, 번들링되는 과정에서 일반 JS 형태로 변환된다고 한다.

변환과정을 예제로 가져와봤다.

변환전

function App(){
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

변환이후

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}

출처

저번에 노마드코더 강좌에서 배웠던 createElement 이런걸 앞으로 코드에서 직접적으로 쓰는것이아닌,

위에 있는 변환전 코드처럼만 쓰면 알아서 변환을 해주는 그런 멋있는 애인것이다.

 

[React 기초] JSX란? / JSX 문법

JSX 문법

1. 컴포넌트에 여러요소, 즉 2개이상 있다면 부모요소가 감싸는 형태여야한다.

예제는 해당블로그에서 참고하였는데

function App(){
    return(
        <h1>테스트1</h1>
        <h2>테스트2</h2>
    )
}
//올바른코드

function App(){
    return(
    	<div>
        	<h1>테스트1</h1>
        	<h2>테스트2</h2>
        </div>
    )
}

이런식으로 div태그로 감싸줘야한다고 한다.

그 이유는 리액트가 Virtual Dom방식에서 컴포넌트 변화를 방지할때 컴포넌트 내부가 DOM트리구조로 이루어져야하기때문이다,

2. 자바스크립트 표현식

자바스크립트를 사용할수있다고 한다!

다만 {}로 감싸주면 되고 유효한 모든 JS 표현식을 넣을수있다.

3. 조건문/반복문 대신 조건부 연산자(;삼항 연산자) 사용

파이썬이나 c언어 등에서 많이사용하는 if나 for문같은 경우 JS표현식이 아니기때문에

사용이 불가하다.

따라서 조건이나 반복하고싶을 경우에 JSX에서의 사용방법을 알아보자

출처

1. 외부에서 사용

function App() {
	let desc = '';
	const loginYn = 'Y';
	if(loginYn === 'Y') {
		desc = <div>GodDaeHee 입니다.</div>;
	} else {
		desc = <div>비회원 입니다.</div>;
	}
	return (
		<>
			{desc}
		</>
	);
}
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간:티스토리]

2. 내부에서 사용

function App() {
	const loginYn = 'Y';
	return (
		<>
			<div>
				{loginYn === 'Y' ? (
					<div>GodDaeHee 입니다.</div>
				) : (
					<div>비회원 입니다.</div>
				)}
			</div>
		</>
	);
}
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간:티스토리]

<- 이런 경우에는 ?와 같은 삼항 연산자를 사용하여 조건을 걸어준것을 볼수있다.

3. 화살표 함수 사용

function App() {
	const loginYn = 'Y';
	return (
		<>
			{
			  (() => {
				if(loginYn === "Y"){
				  return (<div>GodDaeHee 입니다.</div>);
				}else{
				  return (<div>비회원 입니다.</div>);
				}
			  })()
			}
		</>
	);
}
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간:티스토리]

4. 주석사용방법

JS와 동일하게 /**/이지만 특이하게 {}로 또 감싼다는 규칙이있다.

 

+이외에 camelCase 규칙으로 이름을 지정한다는 규칙이있다.