React 학습 React Hook (useState, useEffect)

React Hook

: react 16.8버전부터 react요소로 추가되었다. Hook을 이용하여 기존 class바탕의 코드를 작성 할 필요 없이 함수형태에서 상태 값과 여러 react의 기능을 사용할 수 있는 기술들

 

[ React Hook종류 ]

• useState : 컴포넌트의 상태값을 관리할때 사용된다. 기본적으로 상태값과 상태값을 변경할 수 있는 set함수를 정의해준다.

// 불러오기
import React. { useState } from 'react'

// useState선언
const [count, setCount] = useState(0)

 

• useEffect : 컴포넌트가 마운트 됐을때 (처음 나타났을 때), 언마운트 됐을때 (사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때) 특정 작업을 처리 할 수 있다.

 

// 불러오기
import React. { useState } from 'react'

const Counter = () => {
    // useState선언
    const [count, setCount] = useState(0)
    
    // 마운트와 언마운트
    useEffect(() => {
    	consol.log('컴포넌트가 화면에 나타남')
        return () => {
        	consol.log('컴포넌트가 사라짐')
        }
    })
    
     // 특정값 감지
    useEffect(() => {
    	consol.log('count값이 설정됨')
        consol.log(count)
        return () => {
        	consol.log('count가 바뀌기 전임')
            consol.log(count)
        }
    }, [count])
    
    return (
    <>
    	<div>{count}</div>
        <button onClick={setCount(1)}>변경</button>
    </>
    )
}

export default Counter