글목록 UI 만들기
/* App.css 추가 */
.list {
margin-top: 30px;
text-align: left;
padding-left: 20px;
padding-right: 20px;
}
<div className="list">
<h4> {posts}</h4> //데이터 바인딩
<p>2월 18일 발행</p>
<hr/>
</div>
- 새로운 div 글목록이 생성 되었다
state 문법 사용해보기
- 데이터는 변수에 넣거나
- state에 넣거나 두가지의 보관방법이 있다.
state 만드는법
import React, { useState } from 'react'; //useState
- React안의 내장함수 useState를 사용하겠다는 의미
let [a,b] = useState('남자 코트 추천');
/* ES6 destructuring 문법
let [a, b]
a : 변수에 담을 데이터 (글제목)
b : 변경할 함수 (글제목변경)
*/
- { useState } 상단에 첨부 하도록 한다.
- useState(데이터) 리액트 데이터 저장공간
State 장점
- React를 웹App 처럼 동작하기 위해서 필요한 문법이다.
- State 만든 데이터로 변경이 될경우 html이 자동으로 재렌더링 된다.
- 일반적인 변수 사용시 재렌더링이 안되기 때문에 브라우저가 새로고침이 된다.
- state는 html이 새로고침 없이도 스무스하게 변경된다.
