[ React ] TodoList3️⃣ 로그인/로그아웃

React

[ React ] TodoList3️⃣ 로그인/로그아웃

Mungwang 2023. 9. 12. 12:33

💎 React code

📣 App.js

- Login 처리를 위한 컴포넌트를 생성해주고 improt를 진행한다.

- export const TodoListContext = createContext() : export 내보내기를 통해 TodoListContext를 전역변수로 사용하겠다!!

<TodoListContext.Provider value={ {setTodoList, setLoginMember, loginMember} }>

: ContextApi를 이용해서 자식컴포넌트에게 담아준 3개의 값을 사용할수있게한다.

import React, { useState, createContext } from 'react';

import './App.css';

import SignupContainer from './Signup';

import Login from './Login';

export const TodoListContext = createContext();

function App() {

// 회원가입, 로그인, 회원의 Todo List출력/추가/제거

const [ signupView, setSignupView ] = useState(false);

// 09-12 추가

// 로그인한 회원 정보 저장

const [ loginMember, setLoginMember] = useState(null);

// 로그인한 회원의 todo-list를 저장

const [ todoList, setTodoList ] = useState([]);

return (

<TodoListContext.Provider value={ {setTodoList,setLoginMember,loginMember} }>

<button onClick={()=>{setSignupView(!signupView)}}>

{signupView ?('회원 가입 닫기') : ('회원가입 열기')}

</button>

{signupView === true && (<SignupContainer/>)}

</div>

// 09-12 추가

</TodoListContext.Provider>

);

}

export default App;

📣 Login.js

- improt { TodoListContext } from './App' : export로 전역변수 선언해둔 TodoListContext를 사용하겠다는 improt!

- 'Accept' : 'application/json' : 응답데이터타입을 Spring에서 json형태로 받아주는것아닌 react에서 json형태로

받겠다고 선언하는 구문

import React, { useState, useContext } from 'react';

import { TodoListContext } from './App';

const LoginComponent = () => {

// 전역변수 Context를 사용

const { setTodoList, setLoginMember, loginMember} = useContext(TodoListContext);

const [id, setId] = useState('');

const [pw, setPw] = useState('');

const login = () => {

fetch('/login', {

method : 'post',

headers : {

// 전달되는 데이터 타입

'Content-Type' : 'application/json',

// 응답 데이터 타입

'Accept' : 'application/json'

body : JSON.stringify({

id : id,

pw : pw

})

.then(resp => resp.json())

.then(map =>{

console.log(map);

// 로그인 실패 시

if(map.loginMember === null){

alert('아이디 또는 비밀번호가 일치하지 않습니다.');

return;

}

// 로그인 성공시

setLoginMember(map.loginMember);

setTodoList(map.todolist)

setId('');

setPw('');

})

};

// 로그아웃

const logout = () => {

setLoginMember(null);

};

return (

<table>

<tbody>

<tr>

<td>

<input type="text" onChange={e => setId(e.target.value)} value={id} />

</td>

</tr>

<tr>

<td>

<input type="password" onChange={e => setPw(e.target.value)} value={pw} />

</td>

<td>

<button onClick={login} >Login</button>

</td>

</tr>

</tbody>

</table>

{loginMember && (

)}

</div>

);

}

export default LoginComponent;

- {loginMember && (<button onClick ={logout}>로그아웃</button>)}

: && 기준으로 왼쪽에있는게 true라면 오른쪽 구문실행 ( loginMember의 값이 null 이아니면 true )

💎 Spring

📣 Dto

@Getter
@Setter
@ToString
public class TodoMember {
	
	private int todoMemberNo;
	private String id;
	private String pw;
	private String name;;

}

📣 Controller

@RestController
public class TodoController {
   
   // org.slf4j.Logger : 로그를 작성할 수 있는 객체
   // org.slf4j.LoggerFactory
   private Logger logger = LoggerFactory.getLogger(TodoController.class);
   
   @Autowired
   private TodoService service;   
   
   @PostMapping("/login")
   public Map<String, Object> login(@RequestBody TodoMember member){ 
      return service.login(member);
   }
}

📣 Service

public interface TodoService {
   Map<String, Object> login(TodoMember member);
}

📣 ServiceImpl

@Service
public class TodoServiceImpl implements TodoService{

   @Autowired
   private TodoDao dao;
   
   @Override
   public Map<String, Object> login(TodoMember member) {
      
      TodoMember loginMember = dao.login(member);
      
      Map<String, Object> map = new HashMap<>();
      map.put("loginMember", loginMember);

      if(loginMember != null) {
         List<Todo> todoList = dao.selectTodoLst(loginMember.getTodoMemberNo());
         map.put("todoList", todoList);
      }
      
      return map;
   }
}

📣 Dao

@Repository
public class TodoDao {
   
   @Autowired
   private SqlSessionTemplate sqlSession;

   public TodoMember login(TodoMember member) {
      return sqlSession.selectOne("todoMapper.login", member);
   }
}

📣 Mapper

<resultMap type="TodoMember" id="todoMember_rm">
      <id property="todoMemberNo" column="TODO_MEMBER_NO" />
      <result property="id" column="ID" />
      <result property="pw" column="PW" />
      <result property="name" column="NAME" />
   </resultMap>
   
   <resultMap type="Todo" id="todo_rm">
      <id property="todoNo" column="TODO_NO" />
      <result property="title" column="TITLE" />
      <result property="isDone" column="IS_DONE" />
      <result property="todoMemberNo" column="TODO_MEMBER_NO" />
   </resultMap>
   
   <select id="login" resultMap="todoMember_rm">
      SELECT * FROM TODO_MEMBER
      WHERE ID = #{id}
      AND PW = #{pw}
   </select>

저작자표시 비영리