React 이전에 중요한 JSX를 알아야 합니다.

JSX가 무엇인가요???

JSX는 JavaScript XML을 나타내며 코드에서 HTML과 매우 유사하게 보입니다.

이 코드는 JavaScript로 컴파일되고 실행됩니다. React에서는 웹 앱을 매우 편리하게 만들 수 있습니다.

컴포넌트나 HTML 코드를 배치할 때 기존 바닐라 자바스크립트로 배치하는 것과 달리 매우 간결하고 가독성이 뛰어난 코드를 배치할 수 있습니다.

예를 들어 JSX 없이 HTML에 다음 요소를 추가하는 경우입니다.

React.createElement('div', null, 'Hello World!');

JSX에서

<div>Hello world!</div>

매우 편리하게 요소를 추가할 수 있습니다.

---

그럼 이제 문법을 배워볼까요?

“그럼 사용하셔야 합니다!”

React를 사용하기 위해 일반적으로 사용되는 JSX 구문에 대해 알아봅시다.

속성 할당(속성)

React에서 요소에 속성을 할당하는 것과 HTML에서 속성을 할당하는 것에는 약간의 차이가 있습니다.

// HTML
<div class="codeBlock" style="color: coral;">Hello World!</div>

JSX에서

// JSX
<div className="codeBlock" style={ {"color: coral;"} }>Hello World!</div>

자바스크립트 문법에 클래스 문법이 이미 있기 때문에 구분을 위해 className 이외의 것을 사용합니다.

스타일의 { }(중괄호)는 객체 형태로 JavaScript에 전달하는 것입니다.

나는 background-color: blue를 사용했다; CSS에서 사용. 이렇게 쓴 친구

‘배경색: 파란색;’ 낙타글자로는 이렇게 써야 한다고 합니다.

{ } 및 코드를 사용하여 HTML에 편리하게 변수 배치

JSX에서는 자바스크립트와 마찬가지로 변수를 { }로 묶어 표현식을 사용할 수 있습니다.

기존 HTML에서는 불가능했는데 JSX에서 가능한 이유는 자동으로 다시 렌더링 가능하기 때문에

HTML에서 정적 페이지로 동적으로 변환하려면 수동으로 JavaScript로 변환해야 했습니다.

JSX를 사용하면 JavaScript와 같은 동적 코드를 작성할 수 있습니다.

function sayHello() {
	const name = name;
	return <h1>Hello! { name }!</h1>
}

원래 함수는 Props라는 부모 객체의 유전자와 같은 것을 매개변수로 가져야 하지만 State, Component 및 Props는 아직 게시되지 않았으므로 잠시 생략하겠습니다.

입력할 때 JavaScript 표현식을 { }(중괄호)로 묶습니다.

물론 자바스크립트 구문을 사용한다면 로직에 꼭 필요한 구문을 피할 수 없다. B. for 문 또는 if 문.

그러나 JSX의 모든 JavaScript 구문은 { }입니다. 표현 중괄호 { } 안에만 JSX에 연결할 수 있습니다. 값 이는 평가되고 렌더링되기 때문입니다.

따라서 { } 안에는 값을 표현할 수 있는 표현식만 넣을 수 있고, 값이 없는 for 문, if 문 등의 문은 중괄호 안에 넣을 수 없다.

그런 말 하지마

명령문에 조건부 구문을 사용할 수 없기 때문에 편리한 JSX를 포기하고 있습니까?

for 문을 사용할 때는 map()을 사용하고 if 문을 사용할 때는 삼항 연산자를 사용합니다.

먼저 for 문의 예를 들어 보겠습니다.

let arr = (1, 2, 3)

for (let i=0;i<10;i++) { arr(i) }
===
arr.map(function(a, i) { arr(i) }) // arr(i) === a

for 문의 조건식은 map() 함수를 이용하여 표현할 수 있다.

맵의 A는 각 배열의 데이터 값을 알려주고, i는 배열의 요소 수만큼 0부터 n까지 증가하며 for문의 점진적인 표현처럼 반복된다.

물론 a와 i는 예시이고 변수명은 자유롭게 지정할 수 있다.

if 문의 예를 살펴보겠습니다.

if (true) {
	console.log('맞음');
} else {
	console.log('틀림');
}
===
const tureOrFalse = true ? console.log('맞음') : console.log('틀림');

참 다음에 “?” 기호는 if의 조건을 묻습니다. true이면 콜론( : )의 왼쪽이 변수에 저장되고 false이면 오른쪽이 변수에 저장됩니다.

이벤트 처리가 쉬워집니다.

HTML에서 JavaScript로 동적 웹 응답성을 생성하는 방법

getEventListener('click', function ());

나는 그것을 사용하지만 JSX에서는 쉽습니다.

<h4 onClick={() => {}}> { 글제목 }</h4>
or
<h4 onClick={function ()}> { 글제목 }</h4>

이렇게 하면 onClick 이벤트가 HTML 코드에 직접 실행될 때 트리거되는 함수를 배치할 수 있습니다.

자동 폐쇄 라벨

HTML에는 단일 태그에 불과한 몇 개의 태그가 있었습니다.

<img> <input> <br> <link> <hr> etc...

이 모든 것들은 지금

<img/> <input/> <br/> <link/> <hr/>

이렇게 다 닫자, 리팩토링 하는 법 배웠는데 귀찮아서 안해서 이제 벌칙으로 다 바꿨다.

중첩된 JSX

React에서 컴포넌트를 생성할 때 그 안에 모든 태그를 포함해야 합니다. 싱글 최상위 데이 전체를 감싸야 한다

// 안됨
<div></div>
<div></div>

// 됨
<div>
	<div></div>
	<div></div>
</div>

그렇게 하면