# 변수 이용
App.css
|
1
2
3
4
5
6
7
8
|
...생략
.list{
margin-top:30px;
text-align:left;
padding-left:20px;
padding-right:20px;
}
...생략
|
cs |
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import logo from './logo.svg';
import './App.css';
function App() {
let posts = '강남 고기 맛집';
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<div className='list'>
<h3>{posts}</h3>
<p>11월 16일 발행</p>
<hr/>
</div>
</div>
);
}
export default App;
|
cs |
▲ 결과!!
# useState 를 이용
state
1. 변수 대신 쓰는 데이터 저장공간
2. useState() 를 이용해 만들어야함.
3. 문자, 숫자, array, object 다 저장가능
state 에 데이터 저장하는 이유 : 웹이 App 처럼 동작하도록 하게 하려고.
state 는 변경되면 HTML 이 자동으로 재렌더링이 됨.
그냥 변수는 변경되어도 자동 재렌더링이 안됨.
이게 무슨말이냐면, 변수 사용시 let a = '가' 이게 a = '나' 로 변경하면, 사이트를 새로고침해야 재반영 되는데
state를 사용하면 새로고침 하지 않고도 화면이 변경된다는 얘기다. 이게 Web-app 의 장점!!
자주 바뀌는, 중요한 데이터는 변수가 아닌 state 로 사용하면 좋다.
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let [글제목1,글제목변경1] = useState('가요 인기 순위'); // 글제목='가요 인기 순위', 글제목변경='가요 인기 순위'를 변경하는 함수
let [글제목2,글제목변경2] = useState('화장품 브랜드 순위');
let [글제목3,글제목변경3] = useState('패딩 인기 순위');
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<div className='list'>
<h3>{글제목1}</h3>
<p>11월 16일 발행</p>
<hr/>
</div>
<div className='list'>
<h3>{글제목2}</h3>
<p>11월 16일 발행</p>
<hr/>
</div>
<div className='list'>
<h3>{글제목3}</h3>
<p>11월 16일 발행</p>
<hr/>
</div>
</div>
);
}
export default App;
|
cs |
▲ 결과!!
'공부 > React' 카테고리의 다른 글
| React : state 가 array/object 일 때 데이터 변경하기 (0) | 2022.11.17 |
|---|---|
| 리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기 (0) | 2022.11.17 |
| React : terminal > 경고메세지 안나오게 하는 방법 (0) | 2022.11.17 |
| 리액트 TODO 리스트 만들기 : #2 리액트에선 HTML 이 아닌 JSX 를 써야한다. (0) | 2022.11.16 |
| 리액트 TODO 리스트 만들기 : #1 리액트 설치와 셋팅 (0) | 2022.11.16 |
