[React] 리액트를 사용하기 전 알아야할 JSX 문법

오늘은 리액트를 사용하면서 암기해둬야할 JSX 문법에 대해 작성 할 것이다. 

(리액트 공식 문서를 참조하여 작성할 것이다 ! )

 

JSX란?

const element = <h1>Hello, world!</h1>;

위의 코드를 보면 저게 된다고 ...? 자바스크립트 변수에 어떻게 HTML 태그를 할당할 수 있지 ? 하는 생각이 들 수 있지만 가능하다 !! 

JSX 이기 때문 ! JSX 는 자바스크립트를 확장한 문법으로 한마디로 자바스크립트와 HTML 을 합쳐놨다고 할 수 있다. 

 

리액트의 특징인 컴포넌트를 통해 관심사를 분리하는 것  즉  html ,js ,css 파일을 만들어 기능들을 모두 한 곳에 작성하는 것이 아닌  컴포넌트를 생성하고 그 안에  js,html,css 를 모아 하나의 컴포넌트로 작성할 수 있도록 해주기 위해선 JSX 가 필요하다 . 

 

한마디로 JSX는 리액트에서 UI를 구성할 때 사용하는 문법으로 자바스크립트를 확장한 문법 이라고 생각하면 된다. 

---

 

그럼 JSX 를 실행할 때에는 바로 브라우저에서 실행 할 수 있는가 ? 

정답은 : X 

브라우저가 이해할 수 있는 자바스크립트 코드로 변환해 주어야하는데 이때 이용하는 것이 'Babel' 이다. 

-> Babel 은 JSX 를 브라우저가 이해할 수 있는 자바스크립트로 컴파일 하고 화면에 렌더링한다. 

 

 

JSX 규칙 

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 여는태그와 닫는태그로 감싸주어야한다.

<div>  // 최상위 -여는 태그 
	<div>
    	<h1>hi</h1>
    </div>
    <div>
    	<h2>hello</h2>
    </div>
</div> //최상위 -닫는 태그 

// 최상위로 <> </> 사용 가능

 

class 대신 className 을 사용해야 한다

 

 

리액트에서 CSS class 속성을 지정하려면 className 으로 표기해야 한다. 만약 class 로 작성한다면 리액트에서는 자바스크립트 클래스로 받아들이기 때문에 주의해야한다.

<div className ="love">loveU</div>

 

자바스크립트 표현식 사용 시 , 중괄호 {} 를 사용해야 한다

 

 

중괄호를 사용하지 않으면 일반 텍스트로 인식한다.  유효한 모든 자바스크립트 표현식을 넣을 수 있다. 

function App() {
	const name ="배만춘";
    
    return (
    	<div>
        	안녕, {name}  //중괄호를 사용하지 않으면 name 그대로 출력됨 
        </div>
       );
}

 

사용자 정의 컴포넌트는 대문자로 시작해야 한다

 

 

리액트 엘리먼트가 JSX 로 작성되면 무조건 대문자로 시작해야 한다. 소문자로 시작하게 된다면 일반적인 HTML 엘리먼트로 인식한다. 

이렇게 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부른다. 

function Hello(){  
    ...
}

function HelloPrint() {
    return <Hello />;
}

 

조건부 렌더링에는 삼항연산자를 사용해야 한다.

 

 

if문이 아닌 삼항 연산자를 이용해야 한다. if 문과 for 문은 자바스크립트 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에는 사용할 수 없다. JSX 외부에서는 if문 사용을 허용한다. 

<div>
	{
    	(1+1 === 2) ? (<p>정답</p>) : (<p>오답</p>)
	}
</div>

 

 

여러개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용해야 한다.

 

 

리액트의 여러개의 HTML 엘리먼트를 표시할 때는 'map()' 함수를 사용해야한다.  map 함수를 사용할 때는 반드시 'key' JSX 속성을 넣어야 한다. key 속성을 넣지 않으면 리스트의 각 항목에 key 를 넣어야 한다는 경고가 표시된다. 

 

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)}
    </div>
  );
}

 

오늘은 이렇게 리액트를 사용하기 전 알아둬야 할 JSX 문법에 대해 알아보았다!! 

자바스크립트와 HTML 를 합쳐 사용할 수 있다니 정말 편리한 것 같다 ㅎㅎ