리액트 React에서 레이아웃 만들 때 쓰는 JSX 문법

1. JSX 란?

"JSX(Javascript Syntax eXtension)는 Javascript를 확장한 문법"

 

2. JSX 문법 

 

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다

 

Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

 

ex) 정상작인 코드 1. <div></div>

// div를 사용 하였기 때문에 스타일 적용시 작성한 코드를 div로 
// 한번 더 감쌌다는 부분을 고려해야 한다.
function App() {
	return (
		<div>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</div>
	);
}

 

ex) 정상 코드 2. (<></>)

function App() {
	return (
		<>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</>
	);
}

 

2. 자바스크립트 표현식

 

•  JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 `{ }`로 감싸주면 됩니다.
• 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.
• 또한, 온갖 곳에 { } 중괄호를 열어서 변수들을 집어넣을 수 있습니다.
• href, id, className, src 등 여러가지 html 속성들에도 가능합니다.
• 참고로 변수에 있던걸 html에 꽂아넣는 작업을 있어보이는 말로 데이터바인딩이라고 합니다. 

function App() {
	const name = 'GodDaeHee';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}

 

3. html에 class 넣을 땐 className

 

스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 넣어줘야 합니다.

 

(App.js)

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    </div>
  )
}

 

4. html에 style속성 넣고싶다면 ?

 

<div style="color : blue"> 이런걸 넣고 싶으면

JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야합니다. 

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

 

이렇게 넣어야합니다.

- { 속성명 : '속성값' } 이렇게 넣으면 됩니다. 

- 근데 font-size 처럼 속성명에 대쉬기호를 쓸 수 없습니다.

대쉬기호 대신 모든 단어를 붙여써야합니다. 붙여쓸 땐 앞글자를 대문자로 치환해야합니다.