자바스크립트 데이터를 HTML에 넣어주는 것을 말한다.
function App() {
var data = 'Hello World!';
return (
<div>
<p>{ data }</p>
</div>
)
}
위의 코드를 보면 data라는 변수를 만들었다. 이 data라는 변수를 p태그 안에 넣으려고 할 때, 리액트는 중괄호 안에 데이터 바인딩하고 싶은 변수명을 적어주기만 하면 된다.
결과는
<p>Hello World!</p>
가 되는 것이다.
또한 변수명이 아닌 함수명 등 다른것들을 바인딩 할 수 있고 id, className, src 등 다른 HTML 속성에도 데이터 바인딩이 가능하다.
function App() {
var data = 'Hello World!';
var menu = 'nav';
return(
<div className={menu}>
<p>{ data }</p>
</div>
)
}
위의 코드에서 데이터 바인딩 한 것과 같이 div태그에 className을
<div className="nav">
로 데이터 바인딩 해 주었다.
HTML에서 style="color: black" 속성을 직접 넣으려면,
JSX에선 오브젝트로 바꿔서 적어줘야 한다.
<div style={ {color: 'black', fontSize: '20px'} }>
<p>{ data }</p>
</div>
데이터를 변수 말고, useState를 사용하여 저장해 쓸 수도 있다.
import React, { useState } from 'react';
import './App.css'
function App() {
let post = '일상 기록';
let[title, setTitle] = useState('일상 기록');
return (
<div className="App">
<div className="posts">
<h3>{ title }</h3>
<p>2021년 7월 8일</p>
</div>
<div className="posts">
<h3>{ post }</h3>
<p>2021년 7월 8일</p>
</div>
</div>
)
}
useState를 사용하기 위해서 { useState } 라는 코드를 추가했다.
import React, { useState } from 'react';
{ useState }는 React 패키지에서 useState라는 함수를 불러온다.
useState라는 함수를 불러왔기 때문에 useState()를 사용할 수 있고,
useState(저장할 데이터) 이런 식으로 사용하면 state에 데이터를 저장할 수 있다.
useState를 사용하여 데이터를 저장하기 위해
let [title, setTitle] = useState('일상 기록');
위와 같은 코드를 작성했는데,
이때 title은 '일상 기록'이라는 데이터가 들어있는 state이며,
setTitle은 '일상 기록', 즉 게시물의 제목을 변경할 수 있게 도와주는 함수이다. (작명은 맘대로)
그리고 만들어진 state는 변수와 똑같이 쓸 수 있다. 중괄호를 이용하여 원하는 곳에 데이터 바인딩이 가능하다.
let [title, setTitle] = useState('일상 기록');
<div className="posts">
<h3>{ title }</h3>
<p>2021년 7월 8일</p>
</div>
변수와 같이 title을 바인딩하면 결과는
<h3>일상 기록</h3>
이 된다.
state에 많은 데이터를 한번에 저장하고싶으면 Array, Object 자료형으로도 넣을 수 있다.
import React, { useState } from 'react';
import './App.css'
function App() {
let post = '일상 기록';
let[title, setTitle] = useState(['일상 기록', '상품 리뷰']);
return (
<div className="App">
<div className="posts">
<h3>{ title[0] }</h3>
<p>2021년 7월 8일</p>
</div>
<div className="posts">
<h3>{ title[1] }</h3>
<p>2021년 7월 8일</p>
</div>
</div>
)
}
위의 코드에선 state를 Array자료형으로 만들었고, state 데이터들을 순서대로 바인딩했다.
데이터가 변경될 때 자동으로 관련 HTML을 재렌더링 하게 만들기 위해.
예를 들어 위의 코드에서 만든 글의 제목을 수정하는 경우,
글 제목이 state로 저장되어 있으면 수정된 제목이 웹 페이지에 자동으로 반영되게 해준다.
리액트는 state에 수정이 발생하면 state가 포함된 HTML을 자동으로 재렌더링 한다.
모든 데이터를 state로 저장해도 되긴 하지만,
게시판의 제목, 로고 등은 거의 바꾸지 않는다. 바뀌지 않는 데이터들은 굳이 state로 저장할 필요는 없다.
+) state의 장점은 state의 수정 발생시 자동으로 HTML의 렌더링이 된다는 것인데, 바뀌지 않는 데이터들을 state로 저장한다고 한들 그 의미가 없어진다.