useEffect , useRef

useEffect는 컴포넌트(function, const 시작)가 렌더링을 할 때마다 특정 작업을 실행할 수 있도록하는 Hook

* react에서 컴포넌트를 렌더링 하다 = react에서 js파일을 실행하다

</pre>
useEffect 사용 방법

    import {UseEffect} form 'react';
    useEffect(function, deps)
                  ↓       ↓
    useEffect(() => {},   []); //function의 이름이나 특정 기능이 없을 때 익명함수로 표현
    - function : ~~.js를 들어왔을 때 수행하고자 하는 작업
    - deps : 

             - 배열형태. 검사하고자 하는 특정 값, 빈 배열 작성
             - deps에 특정 값을 넣게 되면 컴포넌트가 실행된 때나 지정 값이 업데이트될 때 useEffect에 적힌 function을 실행.
             - 필수로 작성해야하는 것이 아님
             - deps를 작성하지 않고 function만 작성해서 사용하면 ~~.js를 다시 시작할 때마다 useEffect에 작성된 function함수가 호출

 

------------------------------------------------------------------------------------------------------------------------------------

 

useRef

React : 주기적으로 자동 새로고침 -> 실시간 반영
js파일이나 컴포넌트가 새로고침 될 때마다 특정 기능이나 값이 초기화되지 않고 값이 유지될 수 있도록 할 때 사용
로그인 한 값이 새로고침을 해도 로그아웃이 안되게 하거나 로그인 유효시간이 다 되기 전까지 로그인을 유지할 때 사용

- 입력필드의 포커스 설정 (입력창을 클릭하지 않아도 커서 입력필드 활성화(바로 값 입력 가능하도록))
- 스크롤 위치 관리

 

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

const Ref = () => {

    const countRef = useRef(0);
    useEffect(() => {
        countRef.current++; //새로고침이 될 때마다 countRef값 증가
        console.log('react 새로고침 됨');
    }, []);
    return(
        <>
            <h1>useRef</h1>
            <p>React가 새로고침할 때마다 숫자값을 증가</p>
            <p>{countRef.current}</p>
        </>
    )
}
export default Ref;

처음 숫자 0

react 코드 새로고침 후 숫자 1 증가