# 데이터 바인딩과 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로 저장한다고 한들 그 의미가 없어진다.
Author And Source
이 문제에 관하여(# 데이터 바인딩과 useState), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mdalss0113/React-공부일기-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)