[리액트] 리액트 웹개발 - 2

JSX 문법

자바스크립트 파일 안에 HTML 태그를 사용하는 문법이 리액트에서 지원하는 JSX 문법이다.

자바스크립트와 HTML을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법이다.

 

JSX는 자바스크립트의 확장 문법이기 때문에 HTML 문법을 완전히 그대로 사용할 수는 없다. 대표적으로 class랑 for가 있다.

 

HTML에서 class는 CSS의 class를 적용하는 속성이지만 자바스크립트에서는 객체 지향의 개념으로 선언할 때 class라는 키워드를 사용하기 때문에 JSX에서 class 속성을 작성하려면 className이라는 속성을 작성해주어야한다.

 

html에서 for라는 속성은 label 태그에서 input태그와 함께 사용되는 속성이다. 자바스크립트에는 반복문에 for라는 키워드를 사용한다. 그래서 JSX문법으로 HTML의 for라는 속성을 사용하려면 앞에 htmlFor라고 작성해 주어야 한다.

 

이벤트 핸들러의 이름도 조금씩 다르다. HTML에서 onblur, onfocus, onmousedown 모두 소문자로 작성했던 이벤트 핸들러들은 JSX문법으로 작성할 땐 두번째 단어 부터 첫 글자를 대문자로 작성해 주어야 한다. CamelCase! ( ex : onmousedown => onMouseDown )

 

---

리액트에서 JSX를 사용할 때 지켜야 할 중요 규칙중 하나는 반드시 하나로 감싸진 태그로 작성해야 한다.

ex : 

<p></p>

<p></p>

로 작성하면 오류가 난다.

 

<div>

<p></p>

<p></p>

</div>

로 작성해야 리액트가 오류 나지 않고 동작한다.

 

굳이  div 태그를 만들고 싶지 않다면 리액트에서 제공하는 Fragment를 사용하면 된다.

 

<Fragment></Fragment> 이 태그는 자동으로 react라는 패키지에서 Fragment를 import해준다.

Fragment를 잘 사용하면 불필요한 div태그를 줄일 수 있다.

매번 <Fragment></Fragment>를 사용하기 보다 축약형 표현으로 <></>로 사용하게 되면 따로 Fragment를 불러오지 않아도 되고 코드도 깔끔해질 수 있다.

 

정리 : 리액트에서 JSX문법을 활용할 때는 반드시 하나의 태그로 감싸 주어야 하는데 만약 감싸는 태그가 불필요한 경우라면 Fragment를 활용해서 해결할 수 있다.

---

JSX 에서 HTML과 Javascript를 함께 사용하는 방법

JSX 문법에서 HTML에 자바스크립트 코드를 활용하려면 $ 기호를 사용할 필요 없이 중괄호로 감싸주기만 하면 된다.

중괄호로 감싼 부분에서 자바스크립트 표현식을 사용할 수 있지만 if문이나 for문 혹은 함수 선언과 같은 자바스크립트의 문장은 사용할 수 없다.

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const imageUrl =
  'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

function handleClick() {
  alert('곧 도착합니다!');
}

ReactDOM.render(
  <>
    <h1>{product + ' ' + model} 주문하기</h1>
    <img src={imageUrl} alt="제품 사진" />
    <button onClick={handleClick}>확인</button>
  </>,
  document.getElementById('root')
);

여기서 보면 태그 속성값에 이벤트 핸들러를 등록할 때 handelClick()처럼 소괄호()를 쓰지 않도록 주의한다.

onclick 또한 JSX 문법을 적용받기 때문에 camelCase로 onClick으로 작성해야한다.