[ React ] TodoList 2️⃣ 아이디 중복검사

💎TodoList 1️⃣

↓ 밑에 회원가입이후 추가된거니까 2️⃣를먼저 보지말고 1️⃣을 먼저봐야한다!!

[ React ] TodoList 서버 연결 1️⃣

📣 App.js

- App.js같은경우에는 변한게 없다 기능적인 부분에 추가이기때문!

 

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

  import './App.css';

  import SignupContainer from './Signup';

 

  function App() {

 

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

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

    return (

      <>

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

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

        </button>

        <div className='signup-wrapper'>

 

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

        </div>

 

      </>

 

    );

  }

  export default App;

 

📣 Signup.js

🌷 추가된 부분은 많이 없어서 주석으로 표시해뒀으니 그부분만 보면된다!

const idCheck = (inputId) : inputId는 밑에 reutrn 구문에있는 Id에 입력된 값이다 == 즉 입력받은 값(입력받을때마다 변함)

idValidation 초기값을 false 설정해두고 false = 중복 true = 중복x 이라고 결과값을 정의해둔다!!

input.trim().length <4 : 입력받은 아이디의값이 공백을제거하고 4글자미만이면 함수를 종료시킨다!! 4글자미만은 더확인할필요가없음!

 

Spring으로 Get방식 비동기요청을 보내서 결과값이 0이면 중복x 회원가입가능 결과값 1이상이면 중복이있다라는거라 회원가입불가능!! 

 

🔔 Number(result) === 0 : spring에서 int타입으로 결과값을 반환해도 react로 넘어올때 반환값이 ** String형식으로 바뀌기때문에 **rseult == 0 으로 사용해도 값은 같아서 정상작동하지만 react특성상 === 동일연산자를 사용하는게 맞긴때문에 Number타입으로 데이터를parsing해줘서 코드를 적어주는것이 좋다!

 

 

 import React, { useState } from 'react';

 const SignupContainer = () =>{

   

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

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

    const [pwCheck, setPwCheck] = useState('')

    const [name, setName] = useState('')

    const [result, setResult] = useState('')

// ------------------------------09-12 추가-----------------------------------

    // 아이디 중복검사

    const [idValidation, setIdValidation] = useState(false);

   

    const idCheck = (inputId) => {

 

        setId(inputId); // id변수에 입력받은 아이디 대입

 

        if(inputId.trim().length < 4){

            setIdValidation(false);

            return;

        }

        fetch("/idCheck?id=" + inputId)

        .then(resp => resp.text())

        .then(result =>{

            console.log(`result : ${result}`)

           

            // number 타입으로 parsing

            if(Number(result) === 0){ // 중복 X -> 사용가능

                setIdValidation(true);

            }else{ // 중복

                setIdValidation(false);

            }

        })

        .catch(e => console.log(e));

    }

// ---------------------------------------△------------------------------------------

    // 회원 가입 함수

    const signup = ()=>{

        // 아아디가 사용 불가인 경우(짧거나 중복)

        if(!idValidation){

            alert("아이디 중복임");

            return;

        }

        // 1. 비밀번호가 일치하지않으면 (pw !== pwCheck)

        //   '비밀번호가 일치하지 않습니다' alert로 출력 후 return

        if( pw !== pwCheck){

            alert('비밀번호가 일치하지 않습니다');

            return;

        }

        // *** 회원 가입 요청(비동기, POST) ***

        fetch("/signup",{

            method :"POST",

            headers : {

                "Content-Type" : "application/json"

            },

            // Js Object -> JSON

            body : JSON.stringify({

                id : id,

                pw : pw,

                name : name

            })

        })

        .then(resp => resp.text())

        .then(result =>{

            if( result>0){

                setResult("회원 가입 성공");

                setId('');setPw('');setPwCheck('');setName('');

            }

            else{

                setResult("회원 가입 실패")

            }

        })

        .catch( e => console.log(e));

    };

   

    return(

    {/* -----------------------------09-12 추가----------------------------- */}    

        <div className='signup-container'>

            <label>

                ID :

                <input type='text'

                     onChange={ e => {

                        idCheck(e.target.value)

                   

                    }}

                    value={id}

                    className={idValidation? '' : 'id-error'}

                   

                />

    {/* -----------------------------------▲ -------------------------- */}            

            </label>

            <label>

                Pw :

                <input type='password'

                    onChange={ e => {setPw(e.target.value)}}

                    value={pw}/>

            </label>

            <label>

                Pw CHECK :

                <input type='password'

                    onChange={ e => {setPwCheck(e.target.value)}}

                    value={pwCheck}/>

            </label>

            <label>

                NAME :

                <input type='text'

                    onChange={ e => {setName(e.target.value)}}

                    value={name}/>

            </label>

            <button onClick={signup}>가입하기</button>

            <hr/>

            <h3>{result}</h3>

        </div>

    );

};

export default SignupContainer;

💎 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;   
   
   /** 아이디 중복 검사*/
   @GetMapping("idCheck")
   public int idCheck(String id) {
      logger.info(id);
      return service.idCheck(id);
   }
   
   /** 회원 가입 */
   @PostMapping(value="/signup", produces="application/json; charset=UTF-8" )
   public int signup(@RequestBody TodoMember member) {
      
      logger.info(member.toString());
      return service.signup(member);
   }

📣 Service

public interface TodoService {
   int idCheck(String id);
}

📣 ServiceImpl

@Service
public class TodoServiceImpl implements TodoService{

   @Autowired
   private TodoDao dao;
   
   @Override
   public int idCheck(String id) {
      return dao.idCheck(id);
   }
}

📣 Dao

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

   public int idCheck(String id) {
      return sqlSession.selectOne("todoMapper.idCheck", id);
   }
}

📣 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="idCheck" resultType="_int">
      SELECT COUNT(*) FROM TODO_MEMBER WHERE ID = #{id}
   </select>