리액트 JSX란?

JSX란 무엇일까요.

 

당연히 저는 모릅니다.

하지만 인터넷은 답을 알고있네요

 

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

 

JSX란 자바스크립트를 확장한 문법이며 리액트와 함께 사용할 것이 권장되는 문법입니다.

이 JSX의 문법부터 아주 간단하게 정리해보겠습니다.

 

function App() {

  let post = 'posting';

  return (
    <div className="App">
      <div className='black-nav'>
        <h4 id= {post}> hello world</h4>
      </div>
      <h5> { post } </h5>
    </div>
  );
}

간단한 예제입니다.

뭔가 익숙하게 생겼는데 이것저것 합쳐져서 낯선 느낌이 드네요

 

 

1. class를 넣어줄땐 className

<div className="app">
</div>

html에서는 class를 부여하고자할땐 class = "클래스명"으로 클래스명을 지정해주었지만

리액트에서는 className을 통해서 class를 부여해줍니다.

 

 

2. {} 중괄호를 많은 곳에 사용할 수 있다.

let post = 'posting'

<h1 className = {post}> {post} </h1>

선언한 변수를 클래스네임으로 사용할수도있고 내용으로 사용할 수도 있고

대부분의 경우에서 사용이 가능합니다.

 

 

3.style을 넣고싶을때 style={}로 지정가능

<h2 style = { {color : red , fontSize : '16px'}  }> 내용 </h2>

object 형태로 값을 줄 수 있으며 , 를 통해 여러값을 한번에 줄 수 있습니다.

font-size가 아니라 fontSize로 지정해주어야하네요 이걸 카멜표기법이라고 한다고 합니다.

 

 

대충 이런거구나 싶은데 물론 더 많은 규칙이 있습니다.

 

이분 블로그가 야무지네요...

https://goddaehee.tistory.com/296

[React] 2. JSX란? (정의, 장점, 문법)

 

---

JSX는

 

자바스크립트와 HTML을 하나의 파일에 동시에 작성할 수 있어서 편리하다.

브라우저에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

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

 

---

조건부 렌더링

if else Statement(if-else문)

Ternary Operator (삼항연산자)

&& Operator (and 연산자)

|| Operator (or연산자 )

등을 사용할 수 있습니다.

---

Component

 

functional component

함수에서 return값으로 dom element를 주는 component

상대적으로 아래 class component보다 많이들 사용되는 컴포넌트라고하네요..

 

class component

 

---

선언형 (Declarative)와 명령형 (imperative)

선언형	무엇을 하고싶은지에 초점을 맞춰 개발하는 프로그래밍 방법
명령형	무엇을 어떻게 할지를 구문 관점에서 연산을 설명하는 프로그래밍 방법

리액트는 선언형이며 컴포넌트 기반입니다.

 

---

 

 

 

 

 

참고자료

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React