[React] React 시작하기(1) - JSX

React 공식 문서를 공부하며 작성하게 되었다.

모든 예제의 컴포넌트는 신문법인 function 으로 작성될 예정이다.

(공식 홈페이지에서도 권장함!)

 

물론 function 과 class의 기능적 차이는 크지 않다. 

하지만

useState 같은 Hook을 자주 사용하게 된다면 function 에 유용한 기능이 더 많고,

LIfecycle Hook을 더 자세하게 쓰고 싶다면 class 컴포넌트를 사용하면 된다. 참고하시길 ^v^!

1. JSX  란?

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

이 문법은 문자열도 아니고, HTML 도 아니다.

Javascript 를 확장한 문법으로,

Javascript 안에서 HTML 문법을 사용해 View 를 구성 할 수 있게 하는 자바스크립트 문법이다.

사용이 필수적이지는 않지만 UI 작업을 할 땐 굉장히 큰 도움이 되므로 ... 그냥 사용하도록 하자!

 

원래 리액트에서 div를 만들려면

React.createElement('div', null, 'Hello React 💙');

이렇게 했어야 했다.

 

하지만 이제 JSX를 사용하면

function HelloReact(){
  return (
    <div>Hello React 💙</div>	
  )
 }

깔끔하고 보기 쉽게 작성 할 수 있게 된다.

 

JSX  문법 (1) - 표현식

JXS 의 중괄호{} 안에는 모든 Javascript 표현식을 넣을 수 있다.

function burger(){
  let name = 'cheese'
  return (
    <div>
      I like {name} burger // I like cheese burger
    </div>
  )
}

16+4 , people.name 등등 모두 유효한 Javascript 표현식이다.

 

JXS도 표현식이기 때문에

 if  구문 및  for loop  안에  사용할 수 있고,

변수에 할당하고,

인자로서 받아들이고,

함수로부터 반환 할 수 있다!

 

JSX 문법 (2) - 속성 정의

속성에 따옴표를 사용해 문자열 리터럴을 정의 할 수 있다.

const link = <a href='https://ko.reactjs.org/'> React Home </a>

 

또 중괄호를 사용해 속성에 Javascript 표현식을 삽입할 수도 있다.

const link = <a href={user.blogUrl}>link</a>

 

JSX 문법 (3) - 속성 명명 규칙

JSX 는 HTML 보다 Javascript 에 가깝기 때문에, HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

 

JSX 에서 class -> className 이고,

font-size -> fontSize,

tabindex -> tabIndex 가 된다.