10/11- react

import React, {useRef, useState, useEffect } from 'react'

const Join = () => {

    const [userData, setUserData]= useState({})

    const idRef = useRef()
    const pwRef = useRef()
    const nameRef = useRef()
    const selRef = useRef()

    const btnCk=()=>{
        console.log('id : ', idRef.current.value)
        console.log('pw : ', idRef.current.value)
        console.log('name : ', idRef.current.value)
        console.log('selected : ', idRef.current.value)

        setUserData({
            'id' : idRef.current.value,
            'pw' : pwRef.current.value,
            'name' : nameRef.current.value,
            'select' : selRef.current.value
        })

    }

    useEffect(()=>{
        console.log('현재 data', userData)
        // backend => 값을 보내줌
        // userData.id !==undefined && alert(userData.id)
    },[userData])


  return (
    <div>

        ID : <input type="text" placeholder='ID를 입력하시오' ref={idRef} ></input>
        <button> 아이디 중복확인</button>
        <br></br>
        PW : <input type="password" placeholder='PW를 입력하시오' ref={pwRef}></input>
        <br></br>
        이름 : <input type="text" placeholder='이름을 입력하시오' ref={nameRef} ></input>
        <br></br>

        좋아하는 계절:
        <select ref={selRef}>
            <option>봄</option>
            <option>여름</option>
            <option>가을</option>
            <option>겨울</option>
        </select>
        <br></br>

        <button onClick={btnCk}>회원가입</button>
    </div>
  )
}

export default Join

<날씨 open API>

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

import axios from 'axios'

const Ex10 = () => {

    let url = ''

    const [city, setCity] = useState('')
    const [des, setDes] = useState('')
    const [temp, setTemp] = useState(0)

    const getCurrentLocation = () => {
        navigator.geolocation.getCurrentPosition((position)=>{
            console.log('현 위치의 위도: ',position.coords.latitude)
            console.log('현 위치의 경도: ',position.coords.longitude)

            //내 위치를 구한 이후 => 날씨 데이터 요청
            getWeatherData(position.coords.latitude, position.coords.longitude)
        })
    }

    const getWeatherData = (위도, 경도)=> {
        console.log(위도,경도)
        url =`https://api.openweathermap.org/data/2.5/weather?lat=${위도}&lon=${경도}&appid=d98ae2c3057b1f588501393dc077fc5f&units=metric`

        axios.get(url)
            .then((res)=>{
                console.log(res.data)

                setCity(res.data.name)
                setDes(res.data.weather[0].description)
                setTemp(res.data.main.temp)
            })
            .catch(()=>{alert('error')})
    }

    useEffect(()=>{
        getCurrentLocation()
    },[])

  return (
    <div>
        <h1>{city}</h1>
        <p>{des}</p>
        <p>현재 온도: {temp}°C </p>

    </div>
  )
}

export default Ex10

 

<input 값 추출하기>

import React,{useRef} from 'react'

const Ex06B = () => {

    //useRef : 리액트에서 DOM을 선택해야할 때
    //         JS의 document.getElementByOD(),
    //              document.querySelector()등
    //         DOM에 접근해야하는 함수를 대체하는 리액트 훅


    const comRef = useRef()

    const btnCk = () => {
        console.log('댓글', comRef.current.value)
    }
    
  return (
    <div>
        <input type="text" ref={comRef}></input>
        <button onClick={btnCk}>댓글추가</button>
    </div>
  )
}

export default Ex06B