React(25) 리액트 훅 useEffect란

Updated 2021/05/06

React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다.

 

useEffect    

함수형 컴포넌트 안에서

useState로 state값을 선언하고, 값 자체를 변경할 수 있는 수단(set함수)를 마련했다면, (한마디로 준비물 역할?)

useEffect()는 화면 렌더링이 될 때마다 state라고 부르고 data라고 읽는 state값을 내가 필요한 데이터 모양새로 바꿔 업데이트할 때 사용된다.

 

useEffect( (안에) => { 익명 함수 } ) 로 useState로 선언한 state값을 내가 필요한 모양새로 바꿔 화면 렌더링이 될 때마다 업데이트할 수 있다.

그래서 클래스형 컴포넌트의 componentDidMount (최초 렌더링시) 와 componentDidUpdate (렌더 후 업데이트 시)를 합친 형태로 본다는 거다.

예를 들면 API를 호출하는 것과 이벤트처리함수를 등록하거나 해제할 때, 데이터를 가져오거나, DOM 조작하는 작업 등이다.

 

1. import 해오기

import React, { useEffect } from 'react';

 

2. useEffect 선언하기

useEffect의 매개변수는 익명함수 ()=>{} 와 빈배열 [] 두가지가 들어간다. 

- () => {} : 첫번째 매개변수로 넣은 익명함수를 넣는다. useState로 선언한 상태값 count의 값을 보여준다. 

- [ ] : 두번째 매개변수로 배열을 넣는다. 특정 값이나 빈배열이 주로 들어간다.

• 빈 배열을 넣으면           → 화면에 처음 렌더링(마운트)될 때 한번만 실행된다.
• 배열 안에 값을 넣으면  → 특정 상태값이 업데이트 될 때만 실행된다.
• 아예 배열을 생략하면   → 리렌더링이 할때마다 반복실행된다.

useEffect(() => {
    document.title = '업데이트 횟수: ${count}';
}, []);

** mount란

컴포넌트의 첫번째 렌더링 결과가 실제 돔에 반영된 상태를 말한다.

 

 

3. 전체 코드보기 

function myComponent(){
    const [count, setCount] = useState(0); // count라는 state 추가를 해주자
    
    useEffect(() => { // useEffect로 count가 업데이트될 때 마다 값을 보여주자
        document.title = '업데이트 횟수: ${count}';
    }, []); // 빈배열을 추가해서 불필요한 반복렌더링을 막자
    
    return // 버튼에 onClick이벤트가 발생하면 count를 1씩 더해주자
        <button onClick={() => setCount(count+1)}> 
            increase 
        </button>;
}