# 데이터 바인딩과 useState

➰ JSX 데이터 바인딩?

자바스크립트 데이터를 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에 스타일을 직접 넣고 싶을때

HTML에서 style="color: black" 속성을 직접 넣으려면,
JSX에선 오브젝트로 바꿔서 적어줘야 한다.

<div style={ {color: 'black', fontSize: '20px'} }>
  <p>{ data }</p>
</div>

• { 속성명: '속성값' }으로 적는다.
• 이때 대쉬(-)는 적용되지 않으며, 모두 붙여써 적어주어야 한다.
• 붙여쓸 땐 앞 글자를 대문자로 바꿔써야 한다. (camelCase)

➰ 변수 말고, useState!

데이터를 변수 말고, 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>
  )
}

1 )

useState를 사용하기 위해서 { useState } 라는 코드를 추가했다.

import React, { useState } from 'react';

{ useState }는 React 패키지에서 useState라는 함수를 불러온다.
useState라는 함수를 불러왔기 때문에 useState()를 사용할 수 있고,

useState(저장할 데이터) 이런 식으로 사용하면 state에 데이터를 저장할 수 있다.

2 )

useState를 사용하여 데이터를 저장하기 위해

let [title, setTitle] = useState('일상 기록');

위와 같은 코드를 작성했는데,
이때 title은 '일상 기록'이라는 데이터가 들어있는 state이며,
setTitle은 '일상 기록', 즉 게시물의 제목을 변경할 수 있게 도와주는 함수이다. (작명은 맘대로)

3 )

그리고 만들어진 state는 변수와 똑같이 쓸 수 있다. 중괄호를 이용하여 원하는 곳에 데이터 바인딩이 가능하다.

let [title, setTitle] = useState('일상 기록');

<div className="posts">
  	<h3>{ title }</h3>
	<p>2021년 7월 8일</p>
</div>

변수와 같이 title을 바인딩하면 결과는

<h3>일상 기록</h3>

이 된다.

4 )

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 데이터들을 순서대로 바인딩했다.

+) 변수 말고 굳이 state에 저장하는 이유?

데이터가 변경될 때 자동으로 관련 HTML을 재렌더링 하게 만들기 위해.

예를 들어 위의 코드에서 만든 글의 제목을 수정하는 경우,
글 제목이 state로 저장되어 있으면 수정된 제목이 웹 페이지에 자동으로 반영되게 해준다.

리액트는 state에 수정이 발생하면 state가 포함된 HTML을 자동으로 재렌더링 한다.

+) 그럼 죄다 state로 저장하면 되나?

모든 데이터를 state로 저장해도 되긴 하지만,
게시판의 제목, 로고 등은 거의 바꾸지 않는다. 바뀌지 않는 데이터들은 굳이 state로 저장할 필요는 없다.

+) state의 장점은 state의 수정 발생시 자동으로 HTML의 렌더링이 된다는 것인데, 바뀌지 않는 데이터들을 state로 저장한다고 한들 그 의미가 없어진다.