[React]12. Stroage

React_12_Strorage

 

[홈페이지 실습] *React_10_라우터 홈페이지 실습 이어서 진행

[Storage]

 

  1. Local Storage: 동일한 PC, 동일한 브라우저라면 데이터를 불러올 수 있음

   -구현기능: 자동로그인, 로그인이 안 된 채로 장바구니 기능, 7일간 보지 않기, 북마크 등

   -브라우저를 종료하더라도 데이터를 계속 저장할 수 있음

   -A 브라우저에 저장한 데이터를 B 브라우저에서 불러올 수 없음

   -보안에 취약함

 

  2. Session Storage: 브라우저 창이 종료되면 세션이 함께 종료, 데이터 소멸

    -구현기능: 일반로그인

 

 *주의사항! local Storage, session Storage는 브라우저에 저장하는 데이터

  -DB에 저장되는 데이터가 아니기 때문에 유저별 정보를 저장할 수 없음

  -브라우저를 변경하면 Storage에 저장한 데이터를 유지할 수 없음

 

[Storage.jsx]

1. local Storage

1)local Storage에 데이터 저장하기

• Local Storage에 데이터를 저장할 state 선언

• input 태그에 입력한 내용을 감지하여 localData state에 저장

• 저장하기 버튼을 클릭 시 saveLocal 함수 실행

• Local Storage에 데이터 저장하는 함수

- localStorage.setItem(‘저장할 데이터 이름’, ‘state 이름’)

 

2)local Storage에 저장한 데이터 가져오기

• Local Storage에 가져온 데이터를 저장할 state(필수요소 아님)

 

 

• 데이터 가져오기 버튼 클릭 시 getLocal 함수 실행

  

 

• Local Storage에서 데이터 가져오는 함수

-localStorage.getItem(‘저장된 데이터 이름’)

-가져온 데이터를 state에 저장(필수 아님)

 

• getLocal 함수를 통해 가져온 데이터 출력

 

(로컬스토리지 저장확인)Application-저장용량-로컬스토리지-로컬호스트 주소

 

 

2. Session Storage

1)Session Storage에 데이터 저장하기

• Session Storage에 데이터를 저장할 state 선언

 

• input 태그에 입력한 내용을 감지하여 sessionData state에 저장

 

• 저장하기 버튼을 클릭 시 saveSession 함수 실행

 

• Session Storage에 데이터 저장하는 함수

- sessionStorage.setItem(‘저장할 데이터 이름’, ‘state 이름’)

 

2)Session Storage에서  데이터 가져오기

• Session Storage에 가져온 데이터를 저장할 state(필수요소 아님)

 

• 데이터 가져오기 버튼 클릭 시 getSession 함수 실행

 

• Session Storage에서 데이터 가져올 함수

-sessionStorage.getItem(‘저장한 데이터 이름’)

 

• getSession 함수를 통해 가져온 session 데이터 출력

 

(세션스토리지 저장확인)Application-저장용량-세션스토리지-로컬호스트 주소

 

[Storage 실습]

1. 로그인을 하면 로그인한 ID를 메인에 출력하기
2. 로그인을 하면 로그인을 로그아웃으로 변경하기
3. 자동로그인 기능

 

(1)로그인을 하면 로그인한 ID를 메인에 출력하기

-로그인한 ID가 ‘admin’이고 비밀번호가 ‘1234’인지 확인하기

-정보가 맞으면 메인페이지로 이동하고 로그인한 ID를 메인에 출력

-정보가 틀리면 팝업창으로 ‘아이디 혹은 비밀번호 정보가 틀렸습니다.’ 안내문구 출력

 

[LoginPage.jsx]

• session state 선언

 

• input 태그의 변화를 감지하여 input 태그의 내용 session state에 저장
• 로그인 버튼 클릭 시 handleLogin 함수 실행

 

• 페이지 이동을 위한 useNavigate 선언

 

• 로그인 정보를 확인하고 페이지 이동하는 함수 선언

-session ID,PW를 확인하고 맞으면 session Storage에 저장하고 메인페이지로 이동

-정보가 틀리면 팝업창으로 ‘아이디 혹은 비밀번호 정보가 틀렸습니다.’ 안내문구 출력하고 페이지 이동

*session값은 state가 아니기 때문에 새로고침을 해야 다른 페이지에서 session값을 확인할 수 있음

 

 

[Main.jsx]

• 삼항연산자 활용하여 sessionStorage에 있는 ID값 가져오기

-True이면 해당 session ID값 출력

-False이면 원래 문구 ‘당신’ 출력

(2)로그인 시 로그인 버튼을 로그아웃 버튼으로 전환

[Header.jsx]

• sessionStroage에 있는 ID값 가져오기

- True일 때는 로그아웃 문구로 변경, handelLogout 함수 실행

- False일 때는 로그인 버튼 유지

 

(3)자동로그인 기능

[LoginPage.jsx]

• 자동로그인 체크박스 만들고 체크를 확인할 Ref 등록

• 자동로그인을 위한 local state 선언

• 자동로그인 체크를 확인할 Ref 선언

• 기존  함수에 자동로그인 체크 시 로그인 정보를 localStorage에 저장하는 기능 추가

 

[Main.jsx]

• 로그인한 아이디를 저장할 state 선언

 

• 각각의 Storage에서 session에 저장된 ID값을 가져와서 state에 저장(useEffect)

• 자동로그인 선택 시 state 값에 따라  localStorage에 저장된 ID값 출력

 

[Header.jsx]

• 로그인 정보 저장할 state 생성

• 각각의 Storage에서 session에 저장된 ID값을 가져와서 state에 저장(useEffect)

 

• 자동로그인 선택 시 state 값에 따라 로그아웃 전환

[리액트 MUI]

https://mui.com/

https://mui.com/material-ui/react-text-field/

• Material UI: Docs-MuI Core-Material UI

 

• Material UI 설치: Getting started-Installation

 

• 다양한 설치방법 중 With styled-components 선택

• 사용할 프로젝트에 설치

 

• Components-Text Field 선택

 

• Text Field 중 Basic TextField 요소 선택하기

[LoginPage.jsx]아이디, 비밀번호 input 태그 대신  MuI 요소 사용하기

• import { Button, TextField } from "@mui/material"
•  Basic TextField 요소 사용하기

 <div className='main-container'>

      <h1>Login</h1>

      <TextField fullWidth label="ID" />

      <TextField fullWidth label="PW" />

      <br/>

      <Button  size='large' type="submit" fullWidth  variant="contained"

        >로그인</Button>

    </div>

[Server로 데이터 전송]

 Server로 데이터를 보내는 방법(axios)

 axios

.post('서버주소', {id: 'admin'})

.then((res)=>{
     console.log('데이터 전송 성공');
   })

.catch((res)=>{
console.log('데이터 전송 실패');

})

 

Server가 있는 상태라면 DB에 연결해서 DB에서 정보 확인

프론트엔드에서 서버로 회원정보 확인을 요청

백엔드의 response(회원 여부)는 프론트엔드의 axios의 res에 다시 담겨있음

백엔드가 응답한 res 값에 따라 세션 저장 여부 결정

 

[리액트에서 순차적으로 코드 실행하는 방법]

1. callback 함수
2. promise 문법
3. async await 문법