React.js 리액트 꼭 알아야 할 JSX 문법 모음

CONTENTS

1. 필수 컴포넌트 return 규칙
2. JSX 변수 선언
3. JSX 조건문
4. 인라인 CSS 스타일
5. 태그의 class 이름

---

 

1. 필수 컴포넌트 return 규칙

 

하나의 태그

• 컴포넌트의 경우 return 값 내부는 하나의 최상위 태그 <> </>로 감싸져 있어야 한다.
• v.16 이전 버전에서는 <div></div>로 감싸는 경우가 많고
• v.16 이후 버전부터는 <Fragment></Fragment> 사용이 가능하다. 이는 <></> 로 축약해서 사용할 수 있다.
• 한편, return 안의 괄호()는 필수가 아니다.

 

/* src/App.js */
import React from 'react';

function App() {
	return(
		<Fragment>
			<h1> 하나로 감싸주이소 </h1>
			<p> 안해주면 에러나요 </p>
		</Fragment>
	);
}
export default App;

 

 

undefined 렌더 방지

• undefined 값이 return되어 렌더링이 되는 경우를 방지
• 이 경우 || (OR 연산자)로 디폴트 값이 대신 나가도록 코드 써주기를 권장

 

import React from 'react';

function App(){
	const isTrue = undefined;
	return (isTrue || '값이 undefined입니다');
}

export default App;

 

 

2. JSX 변수선언

 

• const  : 바뀌지 않는 값(상수) 선언시 
• let  : 값이 바뀌는 변수 선언시

 

※ var 는 변수의 생존범위가 넓은 편이고 오버라이팅(변수중복선언)시에도 기존에 선언된 값을 가지고 있을 수 있으므로 가급적 쓰지 않는다.

※ if문 안에서 let으로 선언된 변수는 if문 블록 밖으로 빠져나가지 않는 한 편, var로 선언된 변수값은 if 블록 밖에서도 유효하다.

 

import React from 'react';

function App(){
	const name = '윌스미스';
	let sales = 100000;
	return <h1>{name}, {sales}</h1>;
}
export default App;

 

3. JSX 조건문

 

JSX 외부 조건문 if

• 컴포넌트 return 내부에선 if 사용 불가능
• 컴포넌트 return 밖에서만 if 사용 가능

 

function MyComponent(){
	if(true){
		return(<div>참 리턴</div>)
	}else{
		return(<div>거짓 리턴</div>)
	};
}

 

JSX 내부 조건문1 | 삼항연산자

• 컴포넌트 return문 내부에서 사용할 수 있는 조건문 중 하나. 조건부 연산자
• 기본형은 {  판단용 변수 === '값' ? (참 리턴값) : (거짓 리턴값) }

 

function App(){
	const age = 10;
	return(
		<div>
			{ age === 10? (
				<p>어리시네요</p>
			):(
				<p>몇 살이세요?</p>
			)}
		</div>
	);
}

 

JSX 내부 조건문2 | && (AND연산자)

• AND 연산자인 &&도 컴포넌트 return 값 안에 쓸 수 있다.
• && 연산자는 false의 return 값이 null인 경우에 사용한다 (아무것도 렌더링하지 않음을 의미)
• 기본형은 { 변수 === ‘값’ && 참 리턴값 }

 

function App(){
	const age = 19;
	return (
		<div>
			{ age >= 19 && <p>성인인증 완료</p> }
		</div>
	);
}

 

4. 인라인 CSS 스타일

 

CSS 공통 문법 규칙

 

• “카멜 표기법”으로 변경 : 기존 CSS 문법에서 대쉬(-)를 빼고 뒷 단어의 첫 알파벳을 대문자로 바꿔줌

 

(예) background-color => backgroundColor

• 사이즈 단위를 생략하면 픽셀(px)이 됨

 

객체 변수로 선언후 사용

function App(){
	const myStyle = {
		backgroundColor : ‘red’,
		fontSize : 18
	}
	return (
		<div style={myStyle}>
			.....
		</div>
	);
}

태그 안에 바로 써주는 방식

function App(){
	return (
    	<div style={{
			backgroundColor: ‘black’,
			color: ‘aqua’,
			fontSize: ‘48px’,
			padding: 16
        }}>
        ......
        </div>
    );
}

 

5. 태그의 class 이름

 

• HTML 객체 태그들의 클래스는 기존의 class가 아닌 className 으로 표기한다

 

<div className=“클래스이름”>
...
</div>

 

6. JSX 내부 주석 달기

 

• 기본형태: {/* 주석내용 */} 중괄호 포함, 이 형태로 써줘야 함
• JSX 본 코드에 // 나 /* */ 로 쓰면 화면에 그대로 노출됨
• 예외적으로, 시작 태그 내에서만 코드 뒤에 // 주석을 쓸 수 있지만

 

import React from 'react';

function App(){
	const greeting = 'Hi';
	return(
		<div
			className = "firstDiv" // 예외적으로 허용되는 시작태그 내 주석
		>
			{/* 주석은 이렇게 쓰세요 */}
		</div>
	);
}

export default App;

 

** 꼭! 태그 닫기 **
JSX에선 일반 HTML과 다르게 열린채로 남겨진 태그는 큰 확률로 오류가 난다. 따라서 닫는 태그를 잊지 말고 써줘야 한다. 한편 <br>, <input> 등과 같이 태그만 넣고 그 사이에 별 내용이 들어가지 않는 경우에는 <br />, <input /> 과 같이 self-closing 형태로라도 닫아준다.