React 15 기초 Lifecycle - Mounting (Function)

지난시간에는 Class 형 리액트의 라이프사이클 중에서 Mount 에 대해서 했는데 비교를 위해서 이번에는 함수형 컴포넌트에서 이와 유사한 Hook 을 소개하겠습니다

Hook

훅은 class 형 컴포넌트에서 했었던 라이프사이클을 함수형 컴포넌트에서 하기 위해서 만들어진 기능입니다 상태를 감지하기 위한 useState , useEffect 가 대표적인데 그에 대해서 알아보도록 하겠습니다

useState

사실 이는 우리가 앞에서 잠깐 맛을 보았습니다 https://time-kimdongy1000.github.io/posts/React-13/ 에서 함수형 컴포넌트 state 를 하면서 잠시 useState 소개하면서 간단하게 class 형 컴포넌트 처럼 상태 관리를 하는 함수라고만 소개를 하고 넘어갔는데 이번에는 이곳에서 자세하게 다루겠습니다 하고 넘어갔습니다 이는 class 형 컴포넌트에서 this.state 와 유사한 역활을 하게 됩니다 즉 함수형 컴포넌트에서 상태 관리를 위한 함수입니다

선언 방법

const [count, setCount] = useState(0); 선언 방법은 이처럼 변수 선언자 에 [] 안에 상태를 관리할 변수명(count) 상태관리를 위한 함수(setCount) 를 넣어서 선언을 하고 뒤에는 useState() 를 불러옵니다 이때 0은 count 의 초기값을 의미합니다

상태변경

const settrue_flag = () =>{
    setCount(prevCount  => prevCount  + 1);
}

이렇게 set함수 호출을 해서 안에 있는 값을 변경할 수 있습니다 이때 preCount 는 이전의 상태값을 가지고 state 를 변경하는 것입니다 역시나 마찬가지로 state 가 변경이 되었으므로 React 는 재랜더링을 시도하게 됩니다

useEffect

우리 앞에서 componentDidMount 와 유사한 기능을 할 수 있는 Hook 으로 useEffect 가 있습니다 useEffect는 함수 컴포넌트 내에서 부수 효과를 처리하는데 사용될 수 있으며 컴포넌트가 mount 또는 unmount 될때 호출 할 수 있습니다

예시

우리 그럼 바로 앞장에서 배운 예시를 똑같이 적용해서 함수형 컴포넌트로 만들어보자

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

function Function_mount(props){

    const [commentList , setCommentList] = useState([]);


    const get_commentList = async() => {
            
        try{
            const response = await fetch('http://localhost:8080/v1/api/getCommentList' , {
                method : "GET" , 
                headers : {},

            }).then(res => {

                const status = res.status;
                if(status !== 200){

                    alert('서버와의 통신이 실패했습니다')

                }else{
                    return res.json();
                }

            }).then(res2 => {
                setCommentList(res2);
            })
        }catch(error){
            console.log(error)
        }
    }


    
    useEffect(() => {

        get_commentList();

    }, [])


    return (
        <div>
            <span>함수혐 컴포넌트 중 Mount 진행</span>

            {commentList.map(x => {    
                return (
                    <div key={x.id}>
                        <span>
                            name : {x.name}
                        </span>   
                        <span>
                            comment : {x.comment}
                        </span>   
                    </div>
                )        
            })}

        </div>
    )
}

export default Function_mount;

랜더링이나 이런것들을 크게 중요하지 않고 우리는 useState 와 , useEffect 에 조금 집중을 해보자

useState

const [commentList , setCommentList] = useState([]); 함수형 컴포넌트에서 상태관리를 위해서 만든 useState Hook 입니다 commentList state 변수 선언위 set함수를 선언을 합니다

useEffect

useEffect(() => {get_commentList();}, []) 부수효과를 위한 useEffect Hook 을 작성을 했습니다 그럼 이게 왜 앞에서 componentDidMount 동일한지 살펴보겠습니다 useEffect(() => {부수효과를 내는 함수}, 의존성 변수) useEffect 는 이렇게 2개의 파라미터를 호출넣고 호출하게 됩니다 뒤에 있는 의존성 변수는 생략할 수 있지만

의존성 변수의 역활

위에 있는 것만으로는 도저히 componentDidMount == useEffect 라고 생각이 들지 않는다 다만 같게 만드는 장치는 두번째 인자인 의존성 변수에 달려 있다 이 의존성 변수가 어떻게 정의되어 있냐에 따라서 같은 효과를 내게끔 만들 수 있다 지금처럼 빈배열로 작성을 하게 되면 컴포넌트가 마운트 된 시점 단 한번에 대해서만 useEffect 함수를 호출하게 됩니다 이렇게 되면 componentDidMount 동일한 효과를 내는 방식으로 사용이 된것입니다

만약 의존성 변수에 특정한 값을 넣게 되면 그 특정한 값이 변할때만 useEffect 를 호출하고 state 가 변경이 되면서 컴포넌트의 재렌더링이 일어나게 됩니다

의존성 변수 추가

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

function Function_mount(props){

    const [commentList , setCommentList] = useState([]);
    const [count , setCount] = useState(0);


    const get_commentList = async() => {
            
        try{
            const response = await fetch('http://localhost:8080/v1/api/getCommentList' , {
                method : "GET" , 
                headers : {},

            }).then(res => {

                const status = res.status;
                if(status !== 200){

                    alert('서버와의 통신이 실패했습니다')

                }else{
                    return res.json();
                }

            }).then(res2 => {
                setCommentList(res2);
            })
        }catch(error){
            console.log(error)
        }
    }


    
    useEffect(() => {

        get_commentList();

    }, [count])


    const button_click = () =>{
        setCount(pre => pre + 1);
    }

    return (

    
        <div>

            <span>함수혐 컴포넌트 중 Mount 진행</span>

            <button onClick={button_click}>버튼클릭해서 의존성 배열 수정</button>

            {commentList.map(x => {    
                return (
                    <div key={x.id}>
                        <span>
                            name : {x.name}
                        </span>   
                        <span>
                            comment : {x.comment}
                        </span>   
                    </div>
                )        
            })}

        </div>
    )
}

export default Function_mount;

그럼 이번에는 의존성 변수를 넣어보자 useState 에 새로운 변수 count 를 넣고 클릭을 할때마다 count 값을 변경을 시킬것이다 그러면 클릭을 할때마다 useEffect 가 동작을 하게 되면서 서버로의 요청이 가게 됩니다

이렇게 보일것입니다 우리는 지난시간까지 해서 React 의 라이플 사이클중에서 mount 에 대해서 배웠습니다