[React] 11 Hooks( useEffect,useRef )

Hooks ) 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.

 

용어정리)                
상태 state         //props도 일종의 state로 취급된다
렌더 : 함수가 다시 호출돼서 화면을 그려줌 //state가 변경될 때 /props가 변경될 때
러프 Ref ref : 컴포넌트의 전 생애주기(마운트~언마운트) 동안 유지됨 

미운트/언마운트
컴포넌트가 보이게 되는걸 마운트 보이지 않게 되는걸 원마운트 

컴포넌트가 리렌더링 되어도 언마운트 되기 전까지 유지됨
state가 변경 => 렌더링이 발생 => 컴포넌트
내부변수들 초기화가 됨(Ref값은 유지됨)
Ref가 변경 => 렌더링 X => 변수들의 값 유지,

useState( ) 
useRef( )

const [text, setText] = useState("초기값")
const ref = useRef(value)

 

Ref

1) Ref생성
useRef(value) 훅 함수를 사용하면 { current: value } 객체를 리턴 
구문 > const ref = useRef(value);  { current:value }

2) Ref값 변경

current키로 값에 접근
ref.current = "green";  {current:"green"}

3) Ref 특징

ref  값은 컴포넌트의 전 생애주기(마운트~원마운트)동안 유지됨
컴포넌트가 리렌더링 되어도 언마운트 되기 전까지 유지됨
state가 변경 => 렌더링이 발생 => 컴포넌트 내부 변수들은 초기화가 됨 (Ref값은 유지됨)
Ref가 변경 => 렌더링 X => 변수들의 값 변하지 않음. 

4) Ref용도
저장공간)

값이 변경되어도 렌더링이 일어나지 않으며

렌더링이 되어도 초기화되지 않고 값이 유지되는 저장공간

 

DOM요소의 접근: document.querySelector( ) 같은 역할을 해 줌

const nameInput = useRef( ); //nameInput이라는 변수명에 useRef객체를 만듦
nameInput.current.focus( ); //nameInput.input태그 에 포커스해줌

<input ref={nameinput}> //ref로 nameInput에 가리키는 Dom요소를 저장함

DomFefSample.js

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

const DomFefSample = () => {
    const [name,setName] = useState("");
    const inputRef = useRef();
    const onReset = ()=>{
        setName("")
        // document.querySelector('#inputname').focus();
        inputRef.current.focus();  //Reset 을 누르면 inputRef.current의위치로 포커스를 옮겨줌
    }
    return (
        <div>
            <input name="name" value={name} id="inputname" ref={inputRef}
            onChange={(e)=>setName(e.target.value)}/>
            <button onClick={onReset}>초기화 클릭</button>
        </div>
    );
};

export default DomFefSample;

자바스크립트처럼 Dom요소를 잡아서 focus를 실행시킬 수 있다.

초기화를 누르면 input으로 포커스가 옮겨짐

 

 

RefSample.js

import React, { useState,useRef } from "react";

function RefSample(){
    //state생성
    const [stateNum,setStateNum] = useState(0);
    // ref생성
    const refNum = useRef(0) //{current: 0}
    //변수 생성
    let varNum=0;
    //변수수정함수 구현
    const addLet = ()=>{
        varNum = varNum+1
        console.log(varNum)
    }  
    //ref수정함수구현
    const addRef = () =>{
        refNum.current = refNum.current+1
    }
    //setState호출 함수 구현
    const addState = () =>{
        setStateNum(stateNum+1);
    }
    return(
        <div>
            <p>State :{stateNum}</p>
            <p>Ref :{refNum.current}</p>
            <p>let :{varNum}</p>
            <button onClick={addState}>State+1</button>
            <button onClick={addRef}>Ref+1</button>
            <button onClick={addLet}>let+1</button>
        </div>
    )
        //state가 바뀔때마다 리렌더링됨 렌더링될때 ref값은 유지 변수값은초기화됨
}

export default RefSample;

RefSample

이 코드를 실행시켜 보면

state가 변경 => 렌더링이 발생 => 컴포넌트 내부 변수들은 초기화가 됨 (Ref값은 유지됨)
Ref가 변경 => 렌더링 X => 변수들의 값 변하지 않음. 

이 내용이 더 쉽게 이해된다.

 

사용해보면 Ref가 더해질 때는 화면에 아무 변화도 일어나지 않고 let변수를 더할 때도 마찬가지이다

let변수는 콘솔창에서 더해지는 걸 확인할 수 있다

let 버튼을 6번 클릭하고 State를 1번 클릭해주고 다시 let을 클릭하면 let 값이 초기화된 걸 확인할 수 있다.

렌더링이 발생 => 컴포넌트 내부 변수들은 초기화가 됨 (Ref값은 유지됨)

Ref를 먼저 5번 클릭했을 때에는 화면에 변화가 없다

Ref가 변경될 때는 렌더링 하지 않기 때문에. 변수도 초기화되지 않는다

State를 눌러주면 Ref값이 같이 렌더링 되면서 화면에 5가 나타나고 변수는 렌더링되면서 초기화된다.

 

이걸 말로 풀어서 할려니까 설명하기가 쉽지 않은데 코드를 직접 실행시켜서 해보면 빠르게 이해가 된다.

 

useEffect

마운트 : 나타남
업데이트 : 리렌더링
원마운트 : 사라짐

useEffect를 사용하여

 

마운트/언마운트/업데이트 시 실행할 작업 설정하기
이 함수를 사용하면 처음화면이 나타날 때 특정 작업을 할 수 있음
리렌더링 될 때마다 특정 작업도 할 수 있음

1) useEffect 구문
useEffect(콜백함수)

*렌더링 될 때마다 실행

useEffect( ( )=>{ 
  //실행할 코드
})

*화면에 첫 렌더링 될 때 실행 * value값이 변경될 때만 실행
useEffect( ( )=>{ 
    //실행할 코드
}, [ value ])

*화면에 첫 렌더링 될 때 만 실행
ex> useEffect( ( )=>{ 
   //실행할 코드
}, [ ])

*마운트됐을 때 실행 , 언마운트 됐을때 실행

useEffect( ( )=>{
      //마운트됐을때 실행코드
	return ( ) =>{
     //언마운트 됐을때 실행
	}
}, [ ] )

예제

Timer.js

import React,{useEffect} from 'react';

const Timer = () => {
    useEffect(()=>{
    	//마운트되었을때 실행
        const timer = setInterval(()=>{
            console.log('타이머돌아가는중')
        },1000);

        //클린업 함수 //언마운트되면 실행
        return()=>{
            clearInterval(timer);
            console.log('타이머가 종료되었습니다.')
        }
    },[]) // [] == 렌더링될때 한번만실행
    return (
        <div>
           <span>타이머를 시작합니다. 콘솔봐주세요</span> 
        </div>
    );
};

export default Timer;

App2.js

import React, { useState,useRef } from "react";
import Timer from "./componetnts/Timer"
function App2(){
    const [showtimer,setshowTimer] = useState(false);
    return(
        <div>
            {showtimer && <Timer/>} //showtimer 가 true일때 <Timer>를 마운트함
            <button onClick={()=>setshowTimer(!showtimer)}>타이머보이기/안보이기</button> 
        </div>
    )
        //state가 바뀔때마다 리렌더링됨 렌더링될때 ref값은 유지 변수값은초기화됨
}
export default App2;

버튼을 클릭할 때 showtimer를 토글 시켜줘서 Timer컴포넌트를 마운트 원마운트 시켜준다. 그러면 Timer의 useEffect가 실행되면서 마운트 되었을 때의 구문과 언 마운트될 때의 구문이 실행되게 된다.

 

오늘 갑자기 새로운 걸 좀 많이 배워서 머리가 복잡한데 최대한 정리해보려고 하긴 했는데 뭔가 어수선하게 정리된 느낌이 없잖아 있는 것 같다.. 그래도 또 코드 실행할 수 있게 붙이는 걸 배워서 넣어놨으니 실행해보면서 하면 이해하기

한결 수월하겠지? 내일도  또 리액트한테 조져지러 갈 생각을 하니 정신이 아득하다..