9/28 React-[useState개념,React Event 개념, useState 좋아요 실습, useState를 활용한 랜덤숫자 게임]

** 터미널에서 하위 프로젝트 파일에 들어가 있을때 상위 파위로 나오는 것 => cd..

ex) c:\Users\smhrd\Desktop\React\project02> cd..  ==>

      c:\Users\smhrd\Desktop\React>

** project03 설치 => npx create-react-app project03

** 하위 파일 react 열기 => cd project03

** react 실행 => npm start

[State]

컴포넌트 내부에서 관리되는 변경이 가능한 데이터

 

[State와 변수의 차이점]

state는 일반 변수와 다르게 값이 변하면 화면이 렌더링된다 이때,  setState()라는 함수를 이용한다

<App.js>

import './App.css';
import Ex01 from './Example/Ex01'
import Ex02 from './Example/Ex02';
import Ex03 from './Example/Ex03'; 


function App() {

    return (
      <div>

        {/* ex01 : useState 개념, React Event  개념 */}
        {/* <Ex01/> */}

        {/* ex02: useState 좋아요 예제  */}
        {/* <Ex02/> */}

        {/* ex03: useState를 활용한 랜덤숫자게임 */}
        <Ex03/>
      </div>
  );
}

export default App;

<Ex01.js>

import React from 'react'
import {useState} from 'react'

const Ex01 = () => {
    
  const [num2,setNum2] = useState(0)
  const ck = (event) => {
    console.log(event.target.innerText)

    //React Event
    
    //1. onClick: camel Case로 작성할 것
    //2. (함수이름) : ""대신 JSX 문법인 중괄호 사용
    //3. 이벤트 안에는 함수 형태의 값을 전달
    // 예) {함수이름} => O
    //     {()=>{}} => O
    //4. DOM 요소에만 이벤트를 설정 할 수 있다 => 내가 만든 컴포넌트에는 이벤트 설정 x
  }

    let num =0
    const increase=()=> {
      console.log('숫자 1씩 증가')

      //변수로 처리할 때 => console 창은 되지만, 화면에 렌더링 되지 않는다.
      num = num+1
      console.log('현재 num',num)

      //useState로 처리할 때
      setNum2(num2+1)
    }
 
  return (
    <div>
        <div>
      <p>{num2}</p>
      <button onClick={increase}>+1</button>

      {/* <button onClick={ck}>클릭!</button> */}
    </div>
    </div>
  )
}

export default Ex01

[ex01: useState 개념, React Event 개념]

React Event

1. onClick: camel Case 로 작성할 것

2. (함수이름) : "" 대신 JSX 문법인 중괄호 사용

3. 이벤트 안에는 함수 형태의 값을 전달

예) {함수이름} =>  O      {()=>{}} =>O

4. DOM 요소에만 이벤트를 설정 할 수 있다 => 내가 만든 컴포넌트에는 이벤트 설정X

 

** 변수로 처리할 때 => console 창은 되지만, 화면에 렌더링 되지 않는다.

 

<Ex02.js>

ex02: useState 좋아요 예제

 

import React, { useState } from 'react'

const Ex02 = () => {

    //1. '좋아요' 버튼 클릭 시, 버튼의 내용이 '좋아요 취소'로 변경
    //     '좋아요 취소' 버튼 클릭 시, 버튼의 내용이 '좋아요'로 변경

    //2. '좋아요' 버튼 클릭 시, 비어있는 하트가 꽉찬 하크로 변경
    //    '좋아요 취소' 버튼 클릭 시 , 꽉찬 하트가 비어있는 하트로 변경

    const [likeTxt,setLikeTxt]=useState('좋아요')
    const [likeEmoji,setLikeEmoji]= useState('🤍')
    const handleLike = () => {
        likeTxt == '좋아요' ? setLikeTxt('좋아요 취소') : setLikeTxt('좋아요')

        likeEmoji == '🤍' ? setLikeEmoji('💖') : setLikeEmoji('🤍')
    }

    const [likeNum, setLikeNum]= useState(0)

    //3. '+1'버튼 시, 숫자가 1씩 증가
    const increase =()=>{
        setLikeNum(likeNum+1)
    }
    //4. '-1' 버튼 시, 숫자가 1씩 감소 (단, 0밑으로는 내려가지 않도록!)
    const decrease=()=>{
        likeNum>0 && setLikeNum(likeNum-1)
    }

  return (
    <div>
        {/* 이미지, 좋아요 버튼, +1버튼, -1버튼 */}
        <img 
        width="300px"
        src="http://image.dongascience.com/Photo/2020/03/5bddba7b6574b95d37b6079c199d7101.jpg"></img>
        {/* 내부 이미지를 가지고 올때는 위에서 import 작업은 {}으로 불러오기  */}
        <p>{likeEmoji}{likeNum}</p>
        <br/>
        <button onClick={handleLike}>{likeTxt}</button>
        <button onClick={increase}>+1</button>
        <button onClick={decrease}>-1</button>
    </div>
  )
}

export default Ex02

<Ex03.js>

 useState를 활용한 랜덤숫자게임

import React, { useState } from 'react'

const Ex03 = () => {

    const [ranNum, setRanNum]= useState(0)
    const [inputNum, setInputNum] = useState(0)

    const btnCk=(event)=>{
        console.log(parseInt(event.target.innerText))
        setInputNum(parseInt(event.target.innerText))
        setRanNum(parseInt(Math.random()*3+1))
    }

    //1. 랜덤한 수를 뽑아준다.
    // 범위는 1~3 

    // 2. 누른 버튼의 숫자를 랜덤한 수와 비교 => 함수를 따로 만드는 것을 추천!

    //3.만약, 랜덤한 수와 누른 버튼의 수가 같다면 정답입니다! 다르다면, '땡!'을 출력할 것

  return (
    <div>
        <div>
            <button onClick={btnCk}>1</button>
            <button onClick={btnCk}>2</button>
            <button onClick={btnCk}>3</button>
        </div>
        <div>
            내가 입력한 숫자 : {inputNum}
            <br/>
            랜덤한 숫자: {ranNum}
            <br/>
            {inputNum === ranNum? <p>정답입니다!</p> : <p>땡!</p>}
        </div>
    </div>
  )
}

export default Ex03

 

 

 

memberDAO.java

package com.smhrd.model;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.smhrd.database.SqlSessionManager;

public class MemberDAO {
	SqlSessionFactory sqlSessionFactory = SqlSessionManager.getSqlSession();
	
	//회원가입
	public int join(Member vo) {
		SqlSession sqlSession = sqlSessionFactory.openSession();
		
		//db에 값 삽입(insert())
		//성공한 경우 1, 실패한 경우 0 
		int cnt = sqlSession.insert("com.smhrd.database.MemberMapper.insert",vo);
		if(cnt>0) {
			sqlSession.commit();
		}else {
			sqlSession.rollback();
		}
		sqlSession.close();
		
		return cnt;
	}
}

MemberMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.smhrd.database.MemberMapper">
	<insert id="insert" parameterType="com.smhrd.model.Member">
		insert into member values (#{id},#{pw},#{nick})
	</insert>
</mapper>

joinCoin.java

package com.smhrd.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.smhrd.model.Member;
import com.smhrd.model.MemberDAO;

public class JoinCon extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//요청 데이터 인코딩방식 지정
		request.setCharacterEncoding("UTF-8");
		
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		String nick = request.getParameter("nick");
		
		Member vo = new Member(id, pw, nick);
		MemberDAO dao = new MemberDAO();
		int cnt = dao.join(vo);
		
		//페이지 이동 방식(redirecting,forwarding)
		if(cnt>0) {
			//가입이 성공했을 경우
			//1. main.jsp 이동
			//2. "success" 데이터 보내기
			
			//redirecting, 쿼리스트링 방식 사용해 데이터 전송
			//response.sendRedirect("main.jsp?result=success");
			
			RequestDispatcher rd = request.getRequestDispatcher("main.jsp");
			request.setAttribute("result", "success");
			rd.forward(request, response);
		}else {
			//가입이 실패했을 경우
			//1. main.jsp 이동
			//2. "fail"데이터 보내기
			//response.sendRedirect("main.jsp?result=fail");
			RequestDispatcher rd = request.getRequestDispatcher("main.jsp");
			request.setAttribute("result", "fail");
			rd.forward(request, response);
			
		}
		
	}

}

---

컴포넌트
 => 내가 원하는 코드들을 묶어서 태그화
 - 조건?? 대문자로 시작해야함!
- 컴포넌트 구조의 꺼내는 단축키 rafce프로퍼티
 - 상위컴포넌트
<컴포넌트이름 속성="값"/>
<컴포넌트이름 속성={변수이름}/>
 - 하위컴포넌트
const 컴포넌트이름 = (props)=>{props.name}
const 컴포넌트이름 = ({name})=>{name }

 

 

<state>

state: 컴포넌트 내부에서 관리되는 변경이 가능한 데이터

state와 변수의 차이점: state는 일반 변수와 다르게 값이 변하면 화면이 렌더링 된다 이때, setState()라는 함수를 이용한다

 

const[state(변수 이름),setState(state를 변경시켜주는 함수)]=useState(초기값(return 하면서 초기값 설정))

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

const[num, setNum] = useState(3)

 

 

 

<ex01.js>

import React from 'react'
import {useState} from 'react'

const Ex01 = () => {

    
  const[num2, setNum2] = useState(0)

  const ck = (event) => {
    console.log(event.target.innerText)

    //React Event

    //1. onClick : camel Case로 작성할 것
    //2. {함수이름} : ""대신JSX 문법인 중괄호 사용
    //3. 이벤트 안에는 함수 형태의 값을 전달
    //    예) {함수이름} => o
    //         {()=>{}} => o
    // 4. DOM 요소에만 이벤트를 설정 할 수 있다
    //      => 내가 만든 컴포넌트에는 이벤트 설정X
  }

  let num =0
  const increase=()=>{
    console.log('숫자 1씩 증가!')

    //변수로 처리할 때 => console 창은 되지만, 화면에 렌더링되지 않는다.
    num=num+1
    console.log('현재 num',num)

    //useState로 처리할 때
    setNum2(num2+1)
  }
  return (
    <div><div>
    <p>{num2}</p>
    <button onClick={increase}>+1</button>

    {/* <button onClick={ck}>클릭!</button> */}
  </div></div>
  )
}

export default Ex01

<ex03.js>

import React, { useState } from 'react'

const Ex03 = () => {

    const[ranNum,setRanNum]=useState(0)
    const[inputNum, setInputNum]= useState(0)

    const btnCk=(event)=>{
        console.log(parseInt(event.target.innerText))
        setInputNum(parseInt(event.target.innerText))
        setRanNum(parseInt(Math.random()*3+1))
    }
    //1. 랜덤한 수를 뽑아준다.
    //범위는 1~3

    //2.누른 버튼의 숫자를 랜덤한 수와 비교 => 함수를 따로 만드는 것을 추천!


    //3. 만약, 랜덤한 수와 누른 버튼의 수가 같다면 정답입니다! 다르다면, '땡!' 을 출력할 것
    
  
    return (
      <div>
        <div>
            <button onClick={btnCk}>1</button>
            <button onClick={btnCk}>2</button>
            <button onClick={btnCk}>3</button>
        </div>

        <div>
            내가 입력한 숫자 : {inputNum}
            <br/>
            랜덤한 숫자 : {ranNum}
            <br/>
            {inputNum === ranNum? <p>정답입니다!</p>: <p>땡!</p>}
        </div>
        
    </div>
  )
}

export default Ex03