JSX

JSX는 REACT의 기본 문법이다. Javascript + XML

JSX는 브라우저에서 실행되기 전에 번들링 시스템에 의해 자바스크립트로 변환된다. 이때문에 babel과 같은 트랜스파일러가 필요하다.

JSX문법 규칙

html과 달리, class를 className 속성으로 부여해야한다.
출력부에서는 “문“을 사용불가! only “식“만 가능

if”문”, for”문” 중괄호로 블럭안에 코드를 넣는것을 "문",
삼항조건”식”, () => ~와 같이, 함수가 실행문이거나 연산자, 식일 경우에는 사용 가능하다.
출력부의 공간에서는 반드시 숫자, 문자형태의 자료형만 들어올 수 있음.

이러한 점 때문에 JS의 내장객체들을 사용할때 인스턴스 객체들을 출력부에 넣을 수 없으므로 형변환을 따로 해줘야한다. 대표적인 예로는 new Date()가 다음과 같이 toDateString이라는 메소드를 통해 문자열로 변환한 날짜를 받아올 수 있다.
```
<h1>{new Date().toDateString()}</h1>
```
허나 toDateString은 미국기준으로 날짜를 표기하기 때문에 toLocaleDateString 메소드 함수를 통해 형변환을 시켜주자.
반드시 모든 요소를 감싸주는 최상위 부모가 존재해야함. (Fragment Element <> </>)
JSX에서는 반드시 속성값들을 문자열이 아닌 다른 자료형일 경우에는 중괄호로 감싸줘야한다.
- <h2>{name}은 {age}세, {value}</h2>
- <Body name={name} age={age} value={"true"} />
  
  !! 이 때문에 객체의 형태와 혼돈하지 말아야한다.
태그안의 내용또한 변수를 통해 부여하고 싶다면 중괄호로 감싸줘야한다. 또한 2에 의거하여 특정 조건을 만족할때만 컴포넌트를 넣거나 값을 부여할 수 있다.

<h2>
  {num}는 {num % 2 === 0 ? "짝수" : "홀수"}입니다
</h2>

반드시 map함수를 통해 컴포넌트/DOM요소를 찍어낼때, key속성을 부여해야한다. key 속성은 일종의 id와 같으며, option태그에서도 부여 해줘야한다.

Event

기존의 js와는 다르게, 반드시 onHandler로 이벤트를 부여한다. (REACT에서는 EventListener를 거의 안쓴다.)

on핸들러를 사용함으로써, JSX의 문법 특성상 절대로 출력부에는 “문”이 들어올 수 없으므로, 함수를 리펙토링하는것이 거의 필수화된다.

보통 on핸들러의 값으로 오는 함수이름을 onHandle~ 아니면 handle~로 시작해서 기능 내용을 덧붙여서 만든다. (일종의 함수이름 형식) 또한, on핸들러는 모두 카멜표기법을 사용한다.(onClick, onChange … )

짤막한 예시

//handleOn~
const handleOnClick = () => {
  console.log("clicked");
};

//on핸들러를 사용
<button onClick={handleOnClick}>클릭하세요</button>;

참고로 해당 함수들 또한 props로 전달해줄 수 있다.

허나 이러한 on핸들러에 부여한 함수를 사용할 때 REACT에서는 반드시 주의해야할 점이 존재한다.

회로평가

문장 사용이 불가능한 JSX 문법 특성상, 단락회로평가를 많이 사용하게 된다.

AND 단락 회로 평가

<Viewer count={count} />;
{
  count % 2 === 0 && <Even />;
} // 짝수일때만 Even이라는 컴포넌트를 화면에 출력

좌항이 참인 경우에만 우항을 실행시킴.

‼️ 모든 글이 정확하지 않을 수 있습니다. 잘못된 정보가 있을 경우 댓글로 알려주시면 감사하겠습니다.

JSX

JSX문법 규칙

Event

회로평가

추천 문서