변수 말고 state를 사용하는 이유
변수와 달리, state는 변동사항이 생기면 자동으로 재랜더링 해줍니다.
쉽게 말해서 자주 바뀔 것 같은 것은 state를 사용하면 편리하며,
1. 변경할 일이 거의 없는 데이터
2. 굳이 html에 표시할 필요가 없는 사항들에 대해서는 state 말고 변수를 사용해도 무방하다.
state 사용방법
1.useState라고 치고 엔터키를 누르면, 자동으로 import {useState} from 'react' 표시
function App(){
let posts = '강남 우동 맛집';
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h4>글제목</h4>
<p>2월 17일 발행</p>
</div>
</div>
)
}
(App.css)
div {
box-sizing : border-box
}
.list {
text-align : left;
padding-left : 20px;
border-bottom : 1px solid grey;
}
import { useState } from 'react'; -> state를 사용하고자 한다면, 위에 써야된다.
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>
)
}
let [a,b] = useState('남자 코트 추천');
a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다.
let array = ['Kim', 20];
let name = array[0];
let age = array[1];
let [name, age] = ['Kim', 20]
위, 아래 방법 모두 가능하다.
function App(){
let [글제목, 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>
</div>
</div>
)
}
변수 말고 state에 데이터 저장해서 쓰는 이유
state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다
import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
function App() {
let post = "강남 우동 맛집"
// let[글제목,b]=useState('남자 코트 추천');
// let[글제목2,c]=useState('여자 코트 추천');
// let[글제목3,d]=useState('파이썬독학');
let[글제목,b]=useState(['남자코트 추천','강남 우동맛집','파이썬독학'])
return (
<div className="App">
<div className ="black-nav">
<h4 style={{color:'red', fontSize :'16px'}}>블로그임</h4>
</div>
<div className = "list">
<h4>{글제목[0]}</h4> -> []에서 가져올 것을 지정해줘도 상관 없음
<p>2월 17일 발행</p>
</div>
<div className = "list">
<h4>{글제목[1]}</h4> -> []에서 가져올 것을 지정해줘도 상관 없음
<p>2월 17일 발행</p>
</div>
<div className = "list">
<h4>{글제목[2]}</h4> -> []에서 가져올 것을 지정해줘도 상관 없음
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;