Theme. session
우선, session을 사용하기 위해서 npm install react-session-api 를 실행해줘야 한다.
session을 사용하는 예를 3가지 정도 나타내보도록 한다.
|
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
|
import React from 'react';
import Session from 'react-session-api';
function App(){
// session 저장하는 함수 정의
function save(){
let count = 1024;
Session.set("counter", count); // Session.set("세션명", 값);
}
// session 불러오는 함수 정의
function load(){
let c = Session.get("counter");
alert(c); // 1024
}
return(
<div>
<h3>session test</h3>
<button onClick={() => save()}>session 저장</button>
<button onClick={() => load()}>session 읽기</button>
</div>
)
}
export default App;
|
cs |
session 저장, session 읽기 버튼을 순차적으로 클릭한 결과는,
|
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
|
import React from 'react';
import Session from 'react-session-api';
function App(){
// session 저장하는 함수 정의
function save(){
let member = { "id":"abc", "pw":"123"};
Session.set("member", member); // Session.set("세션명", 값);
}
// session 불러오는 함수 정의
function load(){
let member = Session.get("member");
// alert(member);
alert(JSON.stringify(member));
}
return(
<div>
<h3>session test</h3>
<button onClick={() => save()}>session 저장</button>
<button onClick={() => load()}>session 읽기</button>
</div>
)
}
export default App;
|
cs |
|
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
|
import React from 'react';
import Session from 'react-session-api';
function App(){
// session 저장하는 함수 정의
function save(){
let jsonData = [ { "name":"홍길동", "age":24}, { "name":"성춘향", "age":16} ];
Session.set("jsonData", jsonData); // Session.set("세션명", 값);
}
// session 불러오는 함수 정의
function load(){
let jsonData = Session.get("jsonData");
// alert(JSON.stringify(jsonData));
alert(jsonData[1].age); // 16
}
return(
<div>
<h3>session test</h3>
<button onClick={() => save()}>session 저장</button>
<button onClick={() => load()}>session 읽기</button>
</div>
)
}
export default App;
|
cs |
Theme. cookie
cookie를 사용하기 위해서 npm install react-cookie를 실행해줘야 한다.
|
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
|
import React, {useState} from 'react';
import {useCookies} from 'react-cookie';
function App() {
const [id, setId] = useState("");
// 기존의 cookie를 저장
const [cookies, setCookies] = useCookies(["id"]);
const changeId = (e) => setId(e.target.value);
// cookid 저장하기
const cookieSave = () => {
setCookies("id", id, { path:'/' }); // cookie명, 값, 경로
}
// cookie 불러오기
const cookieLoad = () => {
alert(cookies.id);
}
return (
<div>
<h3>cookie test</h3>
<input value={id} onChange={changeId} /><br/>
<button onClick={cookieSave}>cookie 저장</button>
<button onClick={cookieLoad}>cookie 불러오기</button>
</div>
);
}
export default App;
|
cs |
그 결과는,
과정을 설명하도록 하자.
처음 id의 초기값은 빈칸이다. 그리고 아직 "id"라는 쿠키명으로 저장된 값이 없는 상태.
따라서, cookies의 값도 없다.
하지만, input에 값을 입력하게 되면, 그 값이 changeId라는 함수에 의해 id에 저장된다.
이후, cookie 저장이라는 버튼을 누르면 cookieSave 함수를 통해 "id"라는 쿠키명으로 변수 id에 저장된 값(입력된 값)이 저장되게 된다. 또한, useCookies에 의해 cookies라는 변수에 쿠키가 저장된다.
그리고, cookie 불러오기라는 버튼을 누르게 되면, 저장된 cookie가 불러와진다.
끝.
'React' 카테고리의 다른 글
| [React] file upload & download (0) | 2023.03.30 |
|---|---|
| [React] axios (0) | 2023.03.29 |
| [React] hook - useEffect (0) | 2023.03.29 |
| [React] hook - useState (0) | 2023.03.29 |
| [React] 리액트 시작 및 기초 (0) | 2023.03.29 |