JSX 란?
: React에서 사용하는 자바스크립트 확장 문법으로써, HTML과 Javascript를 섞어놓은듯한 형태이다.
: JSX는 자바스크립트 내에서 마크업을 작성할 수 있고, 로직도 함께 작성할 수 있는 장점을 가지고 있다.
특징
1. JSX 는 자바스크립트의 값(vlaue) 이다.
: 값이라고 하면, 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나, 함수의 리턴값으로 사용할 수도 있다.
2. JSX는 자바스크립트 값을 포함할 수 있다.
: JSX에서 자바스크립트 값을 사용하려면 {} 중괄호를 이용하여 자바스크립트의 값을 감싸주면 된다.
name 이라는 변수를 선언하고, Hayley Lee 라는 값을 할당하였다. 이때, JSX 안에서 이 값을 사용하기 위해 {name} << {} 안에 자바스크립트 값인 변수를 넣어주었다.
이 때, 값이라고 해서 하나의 변수만을 사용할 수 있다고 생각할 수 있는데 ,
어떤 자바스크립트 값이든 모두 JSX 에서 사용할 수 있다.
addOne 이라는 함수 : 숫자 하나를 인자로 받아서 그 숫자에 1을 더한 값을 리턴해주는 함수
이때, 함수에 반환하는 값도 값이라, JSX 안에서 사용할 수 있다.
그래서 {addOne(1)}을 넣고 호출하게 되면 2가 나오게 되는것을 볼 수 있다.
이 때, 주의해야하는 것은 JSX 안에는 자바스크립트 값 만! 들어갈 수 있다.
=> if문, for문 등 구문들은 값이 아니기에 JSX 안에서 사용할 수 없다.
(그래서 값인지 아닌지 판단할 수 있는 방법은 변수에 담을 수 있는지 확인을 해 보는 것이다. )
3. JSX 안에서 tag의 속성을 정의할 수 있다.
: 속성명을 작성할 경우에는 html 에서 작성할 때 와 마찬가지로 "" 를 이용할 수 도 있고, {}를 이용해 자바스크립트 값을 삽입할 수도 있다.
**주의 : JSX는 html보다는 자바스크립트에 더 가까운 문법이기 때문에 속성명을 사용할때는 html 속성명이 아닌 자바스크립트에 맞춰서 camelCase에 맞춰 작성해 줘야 한다!!
ex) class -> className , tabindex -> tabIndex
4. JSX 안에서 바로 이벤트리스너를 등록 할 수 있다.
: 기존처럼 html 에서 마크업을 작성-> 자바스크립트로 접근 -> 이벤트 리스너 등록 (X)
: tag를 작성할때 바로 이벤트 리스너를 넣을 수 있다. (on + 이벤트명)
ex)
const introduce = () => alert("Welcome to Hayle's storage!")
return (
<h1 onClick={introduce}>Hello!</h1>
);
5. Inline style
: HTML에서는 tag에 inline style을 부여해주기 위해 특정한 string 형태로 속성을 부여했는데,
JSX 에서는 자바스크립트 object 형태로 inline style을 표현하게 된다.
//style객체를 선언 해주고, 그 안에 key : value 형태로 스타일을 작성한다.
const style = {
color:"navy",
backgroundColor:"pink"
}
//이때, style 속성명은 무조건 ! camelCase로 작성해 준다.
return (
<h1 style={style}>Hello!</h1>
);
//적용을 위해 style이라는 속성 명에 원하는 객체(=자바스크립트 값)를 {} 부여해 준다.
만약, 이러한 방법이 아니라 JSX 안에서 바로 스타일 객체를 선언하고 싶은 경우에는
return (
<h1 style={{color:"pink"}}>Hello!</h1>
)
//바로 객체를 만들어 준다.
//이 때, 중괄호가 2개가 들어가는데,
//첫 번째 중괄호 : JSX안에서 자바스크립트 값을 사용하겠다 는 의미
//두 번째 중괄호 : 자바스크립트의 object를 표현함
6. JSX closing
: HTML 같은 경우에는 <img>태그처럼 닫는태그가 없는 경우도 있었는데, JSX 인 경우에는 </>를 해주지 않으면 정상적으로 동작하지 않는다. (셀프클로징 하기)
7. 하나의 부모 태그
: JSX를 이용할 때에는 모든 JSX tag는 하나의 부모 tag로 감싸져 있어야 한다는점을 꼭 기억하기!
ex) <h1>태그와 동일한 <p> 태그를 동일한 관계로 넣으면 에러가 발생한다.
만약 여러 태그들을 작성하고 싶을 땐 그 태그들을 모두 감싸는 하나의 부모 태그가 존재해야한다.
8. React.Fragment
: 실제 DOM에는 추가되지 않으면서 JSX들을 그룹화 하기 위해서만 사용하는 React.Fragment라는 tag가 있다.
이 태그는 react패키지에서 사용하는것이기 때문에 /import React from 'react/ 를 꼭 먼저 넣어주고,
실제 사용은 <React.Fragment>라는 표현을 적어주면 된다.
단축표현법 : <> </> : React.Fracment와 동일한 형태로 인식을 해준다.