React #03 State 실습

장서영·2023년 12월 7일
0

React

목록 보기
3/12

들어가기 전 check!
state는 상태가 변할 수 있는 수 ->변수
-DOM
<span>장서영</span>
document.getElementById~~.innerText = ‘정호준’
~>값을 바꾸는 행위 + 화면을 바꾸는 행위
-JSX
값만 바꿔서는 화면이 바뀌지 않는 것
~>state이용하자

1. 좋아요 누르기 실습

-React에서 이미지 경로를 설정하는 방법 2가지
-state를 활용해서 즉각적이 반응을 보이는 페이지
step 1. 사진, 좋아요 하트, 하트의 개수 화면 세팅
step 2. '좋아요' 하트 클릭 시, 하트가 꽉찬 하트로 변경 '좋아요 1개'라는 문구로 변경
step 3. 꽉 찬 하트 클릭 시, 비어있는 하트로 변경 '좋아요 0개'라는 문구로 변경

이미지 가져오는 두가지 방법

1) 이미지 수입해오기
- src 폴더
- import 이미지변수 from 경로
- <img src={이미지변수}/>

2) 서버에 이미지 업로드하기
- public 이라는 폴더 <- 이미 서버에 업로드 됨
- 이때 별도로 import 작업은 들어가지 x
- 왜냐하면 public 안에 있는 컨텐츠들은 이미 서버와 통신이 가능한 상태
- url 에 http://localhost:3000/pic/사진이름.확장자 <-열림

import React, { useState } from 'react'
import './Ex02.css';
// import picSrc from './style/pic.jpg'

const Ex02 = () => {
    const picSrc = "http://localhost:3000/style/pic1.jpg"

    /* 좋아요 기능을 가진 페이지를 제작해보자. 

    변수명 통일!
    - 좋아요 숫자 number
    - 좋아요 하트 emoji
    - 단, 화면에 즉각적인 반응이 필요하다
    - 빨리 푼 사람들은 ex02.css 파일 만들어서 예쁘게 디자인 해보기
    */
    
    const[number, setNumber] = useState(0);
    const[emoji,setemoji] = useState("🤍");

    /** 좋아요를 설정하는 함수 */
    const likeButton = ()=>{
        if(emoji=="🤍"){
            setemoji ("💗");
            setNumber(1);
        }else{
            setemoji ("🤍");
            setNumber(0);
        }

       
    }
  return (
    <div className='postBox'>
        <img width= "300px" src={picSrc}></img>
        <p className='textBox'>
            <span className='likeEmoji' onClick={likeButton}> {emoji}</span>
            <span className='likeNum' onClick={likeButton}>좋아요 {number}</span>
        </p>
    </div>
  )
}

export default Ex02

결과

2. 랜덤게임

  1. 랜덤한 수를 뽑아준다. (1~3) - ranNum
  2. 사용자가 누른 수를 인지 - inputNum
  3. 만약 난수와 내가 누른 숫자가 같다면 "정답~"
    다르면 땡을 출력하기
    ~힌트~
  4. 버튼을 누르는 함수는 하난다
  5. 이벤트 타겟 객체
  6. 난수 뽑는 메소드 : Math.random()
import React,{useState} from 'react'

const Ex03 = () => {
    /*
    *** 조건이 있음
    삼항연산자
    */
   const [inputNum,setInPutNum] = useState(0);
   const [ranNum,setRanNum] = useState(0);
   
   const btnCk = (e) => {
    console.log('btnCk Function',e.target.innerText);
    setInPutNum(e.target.innerText)

    console.log('ranNum',parseInt(Math.random()*3)+1);
    setRanNum(parseInt(Math.random()*3)+1);
   }
  return (
    <div>
        <h1>랜던게임</h1>
        <p>원하는 숫자를 하나 클릭해주세요.</p>
        <button onClick={btnCk}>1</button>
        <button onClick={btnCk}>2</button>
        <button onClick={btnCk}>3</button>

        <p>내가 선택한 숫자 : {inputNum}</p>
        <p>컴퓨터가 선택한 숫자 : {ranNum}</p>
        
        {inputNum == ranNum ? 
        <p> 정답입니다🎉</p>:
        <p></p>}
        
    </div>
  )
}

export default Ex03

사용자가 누른 수는 e.target.innerText를 통해 가져옴

3.주사위 게임

게임 순서
1.유저는 '던지기' 버튼을 누를 수 있다.
2. '던지기' 버튼을 눌렀을 때 유저의 주사위 모양이 바뀐다.(랜덤)
3. 이 때, 컴퓨터의 주사위 모양 또한 랜덤으로 바뀐다.
4. 나의 주사위와 컴퓨터의 주사위를 비교한다.
5. 내가 승리하면 팝업창으로 '승리'
내가 패배하면 팝업창으로 '패배..'라고 띄워준다.

~ 변수 명 통일 ~
내가 던진 주사위 숫자 = myDice
컴퓨터가 던진 주사위 숫자 = comDice

내가 던진게 더 크면 내가 승리, 아니면 패배
src X -> public 방식을 이용해서 이미지 가져오기

사진 public에 넣어주기

step 1. 이미지 두개 가져오기(주사위 1 - 1)
step 2. 숫자 랜덤하게 가져오기, state 적용
step 3. 랜덤하게 가져온 숫자에 따라 이미지 다르게 가져오기
step 4. 승리 /패배 판별

여기서 잠깐!! 리액트 부트스트랩 깔기

->React 와 Bootstrap을 통합하여 사용할 수 있도록 만들어진 라이브러리
Bootstrap은 HTML,CSS,JavaScript를 이용한 프론트엔드 개발을 빠르고 효과적으로 할 수 있도록 도와주는 프론트엔드 프레임워크
1.Installation
2.

head 태그 안에!
3.CSS → Ex04.jsx
4.버튼


버튼 색깔 가져옴

  • useEffect
    자기가 생각하기에 쉬운 로직부터 사용하므로 useEffect를 통해 시점을 알려줘야함
import React, { useEffect, useState } from 'react'
// css
import 'bootstrap/dist/css/bootstrap.min.css';
//버튼
import { Button } from 'react-bootstrap';
import './Ex04.css';

const Ex04 = () => {

 // 변수 설정
 const[myDice,setmyDice] = useState(1);
 const[comDice,setcomDice] = useState(1);
 const[result,setResult] = useState('게임 시작 전..');

 //백틱으로 설정
 const picSrc = `http://localhost:3000/style/dice${myDice}.png`
 const piccomSrc = `http://localhost:3000/style/dice${comDice}.png`

 /**랜덤하게 숫자를 추출해주는 함수 */
 const makeRandom =() => {
  return Math.floor(Math.random()*6+1);
 }
 
 const btnCk = () => {
    setmyDice(makeRandom());
    setcomDice(makeRandom());

    
 }

 // 주의사항 ! 여기서부터는 예습이기 때문에 지금 당장 이해 할 필요 X
 // 첫번째 인자 함수, 두번째 인자 배열
 // myDice와 comDice중 하나가 바뀌면 함수 실행
   useEffect(()=>{
    if(myDice>comDice){
      setResult('승리😎')
    }else if(myDice<comDice){
      setResult('패배😫')
    }else{
      setResult('무승부😁')
    }
   },[myDice,comDice])

 // 여기까지는 지금 당장 이해할 필요X

 const resetCk =() =>{
    setmyDice(1);
    setcomDice(1);
    setResult('시작 전..😃');
 }
  return (
    <div className='mainDice'>
        <h1 className='textDice'>주사위 게임</h1>
        <h2>{result}</h2>
        <div>
            <img width= "100px" src={picSrc} ></img>
            <img width= "100px" src={piccomSrc}></img>
        </div>
      <Button variant="success" onClick={btnCk}>던지기</Button>{' '}
      
      <Button variant="warning" onClick={resetCk}>리셋</Button>{' '}
    </div>
  )
}

export default Ex04


던지기 눌렀을 때

리셋 눌렀을 때


아래 흐름 꼭 알고 있자

profile
영이의 일상은 짱셔요

0개의 댓글