JSX란?
const hi = <p>Hi</p>;위의 코드는 JavaScript도 아니고 html도 아니다.
위의 문법은 리액트에서 사용하는 JSX(JavaScript Syntax Extension)라고 불리는 JavaScirpt 확장버전이다.
HTML과 아주 비슷하게 생겼고, JavaSciprt 파일 내에서 작성할 수 있다. 그러나 JSX는 JavaSciprt 문법이 아니기 때문에 .js 파일내에 JSX 문법이 있으면 브라우저에서 해석하지 못한다.
JSX로 작성한 코드는 브라우저 동작 과정에서 바벨(Babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환한다.
🍋JSX 장점
- HTML 태그를 그대로 사용하기 때문에 보기 쉽다.
- HTML 마크업과 JavaScirpt 로직을 같이 구현할 수 있다.
- JavaScirpt 문법을 이용해서 HTML을 생성할 수 있다. → 별도의 HTML파일이 없어도 된다.
- 기존의 DOM + Event와 작동방식과 비교했을 때 훨씬 간편하게 UI를 구성할 수 있다.
- 📌데이터 바인딩을 쉽게 할 수 있다.
데이터 바인딩이란? 받아온 데이터를 javascript로 저장한 후 HTML에 넣는 것이다.
let posts = '하남 디저트 맛집' ← 서버에서 데이터 가져옴<h4>블로그 글</h4> ← 서버에서 가져온 데이터를 여기에 보여줌전통적인 자바스크립트 데이터 바인딩은 아래와 같다.
document.getElementById().innerHTML = ''이걸 JSX로 한다면 {변수명}만 넣어주면 된다.
function App(){
let posts = '데이터'
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
<div>
<h4>{ posts }</h4>
</div>
)
}함수도 넣을 수 있다.
function App(){
let posts = '데이터'
function 함수(){
return 100
}
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
<div>
<h4>{ 함수() }</h4>
</div>
)
}이미지를 넣고 싶다면?
import logo from './logo.svg';
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
<div>
<img src={logo}>
<h4>{ 함수() }</h4>
</div>
)
}import로 받아오고 {} 안에 넣는다.
그 밖에 id, href 등의 속성도 {} 로 사용 가능하다.
JSX 특징
🍋JSX element
HTML 문법을 JavaScirpt 코드 내부에 써주면 그것이 JSX이다.
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>
};🍋JSX attribute
Property는 camelCase를 사용한 태그에 attribute(속성)을 주고 싶을 땐 “” 감싸줘야한다.
속성을 추가하고 싶을 때는 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 react 공식문서를 참고해야한다.
HTML class = JSX className
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li className="list-item">programming</li>
};🍋Self-Closing Tag
JSX에서는 어떤 태그라도 Self-Closing Tag가 항상 가능하다. <input> 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내줘야 한다.
<div /> 와 <div></div> 는 같은 표현이다.
🍋중첩 JSX
1. ()소괄호로 감싸기
const good = (
<div>
<p>hi</p>
</div>
)2. 항상 하나의 태그로 시작하기
const wrong = (
<p>list1</p>
<p>list2</p>
)JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소인 부모 태그가 있어야 한다.
때문에 위와 같이 제일 처음 요소가 sibling(형제/자매)이면 안된다. 무조건 하나의 태그로 감싸져야 한다.
const wrong = (
<div>
<p>list1</p>
<p>list2</p>
</div>
)위와같이 <div> 와 같은 아무 태그로 감싸도 되지만 div 태그의 불필요한 생성을 막기 위해 Fragments 문법을 제공한다.
Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이다.
<> ... </>
<>
<div className="loginBtn" onClick={() => console.log("click")}>Login</div>
<br />
<div style={{backgroundColor: "grey", height: "10px"}} />
</>🍋 JavaScript 동작 가능
function Login(){
const notify = () => alert{"Hello"};
return <h1 onClick={notify} **style={ {color : "red", fontSize: "30px"} }**>Login</h1>
}
export default Login;onClick 은 JavaScript 함수이다.
JavaScript 함수는 {} 로 감싸야한다.
JSX에서 스타일 부여할때는 {} 안에 JavaScript object 객체로 부여한다.
Inline Styling은 { {} } 로 감싸야한다.
style 속성도 camelCase 작명관습에 따라 바꿔줘야한다.
style을 변수로 담아서 사용가능하다.
function App() {
let posts = { color: 'blue', fontSize: '30px' }
return(
<div className="App">
<div className="black-nav">
<div style={posts}>개발 Blog</div>
</div>
<h4>{post}</h4>
</div>
);
}✍🏻 최종 정리
JSX란?
- JSX(JavaScript Syntax Extension)라고 불리는 JavaScirpt 확장버전이다.
JSX 장점
- 데이터 바인딩을 쉽게 할 수 있다.
JSX 특징
- JSX element : HTML 문법을 JavaScirpt 코드 내부에 써주면 jsx이다.
- JSX attribute :
Property는 camelCase 사용
태그 속성을""으로 감싸기
HTML에서 사용하는 속성명과 다를 수 있으니 공식문서 참고 - Self-Closing Tag
하나의 태그가 요소인 경우 항상/으로 끝내줘야 한다. - 중첩 JSX
1. ()소괄호로 감싸기
2. 항상 하나의 태그로 시작하기
Fragments :<> ... </>
JavaScript 동작 가능
- JavaScript 함수는
{}감싸기 - Inline Styling은
{ {} }로 감싸기 - style 속성도 camelCase 작명
- style을 변수로 담아서 사용가능
참고
wecode 제공 자료
코딩애플 : React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법)
