[리엑트(React)] useEffect, useRef

useEffect

useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook.

component가 mount 되었을 때나 unmount 또는 update 되었을때 특정 작업 처리
즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이라 보면 된다.

클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방

 

예제) select를 이용한 항목 변경

import { useState, useEffect } from 'react'
// useEffect : 생명주기 메소드를 대체할 수 있는 훅(완전 동일할 순 없다)
const Info = () =>{

    const [animal, selectAnimal] = useState("dog")
    const [food, selectFood] = useState("cup")
    // 지역변수로써의 상태변경함수
    const handleChangeAnimal = e =>{
        selectAnimal(e.target.value)
    }
    const handleChangeFood = e =>{
        selectFood(e.target.value)
    }
   // useEffect 기본형 : 매 랜더 시마다 콜백함수 호출!

   // componentDidMount 대체하기 : 최초 1회 랜더링 직후 호출!
   // 두번째 인자로 비어있는 배열을 전달한다
   // 만일 배열에 요소가 있을 경우, 다른 목적을 가지게 된다
   /* 
   useEffect(()=>{
        console.log("만나서 반갑습니다")
    }, [])
    */
   // componetntDidUpdate 대체하기, but 특정 항목들에 대해서만!
   useEffect(()=>{
       console.log("업데이트 해줘서 고마워~")
   }, [animal, food])

    return <div>
        <h1>좋아하는 동물은?</h1>
        <select onChange={handleChangeAnimal}>
            <option value="dog">강아지</option>
            <option value="cat">고양이</option>
            <option value="ham">햄스터</option>
            <option value="par">앵무새</option>
        </select>
        <h2>당신의 최애 동물: {animal}</h2>

        <h1>좋아하는 음식은?</h1>
        <select onChange={handleChangeFood}>
            <option value="cup">컵라면</option>
            <option value="bur">햄버거</option>
            <option value="bob">비빔밥</option>
            <option value="don">돈가스</option>
        </select>
        <h2>당신의 최애 음식: {food}</h2>
    </div>
}

export default Info

 

 

예제2) api 연동을 통해 강아지 사진 불러오기

 

import {useState, useEffect} from 'react'
import axios from 'axios' // api 연동을 위해 사용
import styled from 'styled-components'
// dog api address : https://dog.ceo/api/breeds/image/random
// 컨테이너
    const Container = styled.div`
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    `
// 이미지
const Image = styled.img`
width: 300px; height: 300px
`
// 요청을 보내어 비동기적인 응답을 받아낼 함수
const apiCall = async () =>{
    return await axios.get("https://dog.ceo/api/breeds/image/random/3")
}
const DogImage = ()=>{
// componentDidMount를 대체하려면?
    const [dogs, setDogs] = useState([])// 콜백과 빈 배열을 차례로 인자 전달!
    useEffect(()=>{
        apiCall().then(result=>{
            console.log(result.data.message)
            setDogs(result.data.message)
        }).catch(failed=>{
            console.log(failed)
        })
    }, [])
    // map(콜백) : 요소 수만큼 콜백을 호출한다. 
    // 호출 시 요소를 차례대로 인자로 받는다
    // 결과는 반환된 값들로 이루어진 배열
    return <Container>
        {dogs.map(dog=>{
            return <Image src={dog} alt="강아지 사진" />
        })}
    </Container>
}

export default DogImage

useRef

: 특정 DOM을 가리킬 때 사용하는 Hook 함수(포커스 설정, 특정 엘리먼트의 크기/색상 변경 등)

 

예제) 클릭시 색 변경

 

import {useState, useEffect, useRef} from 'react'
// useRef : React.createRef() 를 대체한다.
// useRef를 활용한 커스텀 훅 만들기
const useClick = (changeColorRandomly)=>{
    const colorRef = useRef()

    useEffect(()=>{
        if(colorRef.current){
        colorRef.current.addEventListener("click",changeColorRandomly)
    }
    },[])

    return colorRef
}
const myColors = ["red","orange","yellow","green","blue","purple","teal","pink"]
const ColorBox =()=>{
 
    const [colorState, setColorState] = useState(myColors[0])
    const changeColorRandomly = ()=>{
      const idx = Math.floor(Math.random()*myColors.length)
        setColorState(myColors[idx])
    }
    /*
    const colorRef = useRef() // 참조변수를 반환!

    useEffect(()=>{
        console.log(colorRef.current)
        colorRef.current.addEventListener("click", ()=>{
            console.log("!@!!@#")
        })
    }, [])
    */
    const colorRef = useClick(changeColorRandomly)

    return <div>
        <div ref={colorRef} style={{width: 200, height: 200, backgroundColor:colorState}}></div>

    </div>
}

export default ColorBox