- 레이아웃
function App(){
let posts = '강남 우동 맛집';
return (
<div className="App">
<div className="black-nav">
<div>BLOG</div>
</div>
<div className="list">
<h4>글제목</h4>
<p>2022년 06월 09일</p>
</div>
</div>
)
}
//App.css
div {
box-sizing : border-box
}
.list {
text-align : left;
padding-left : 20px;
border-bottom : 1px solid grey;
}
- state
import { useState } from 'react';
import './App.css'
function App(){
let [a,b] = useState('남자 코트 추천');
let posts = '강남 우동 맛집';
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h4>글제목</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
}
맨 윗줄에 import {useState} from 'react' 하고
원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다.
그리고 저장한 자료를 나중에 쓰고 싶으면
let [a,b] = useState('남자 코트 추천');
a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다.
- destructuring 문법
예를 들어서 ['Kim', 20] 이렇게 생긴 array 자료를 만들어놨는데 에서 Kim이랑 20이라는 자료를 각각 변수에 저장
let array = ['Kim', 20];
let name = array[0];
let age = array[1];
let [name, age] = ['Kim', 20]
- 변수 말고 state에 데이터 저장해서 쓰는 이유
이번엔 state를 하나 만들어서 {글제목} 이렇게 데이터바인딩 해놨다고 가정해봅시다.
state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다
참조 : 코딩애플 리액트 강의
Top comments (0)