[코딩온] 웹개발자 풀스택 과정 14주차 회고 | React - lifecycle

리액트 - 라이프사이클

• Mount
  - Dom이 생성되고 웹 브라우저 상에 나타남
  
• Update
  - props or state 바뀌었을 때 업데이트함
  
• UnMount
  - 컴포넌트가 화면에서 사라질(제거될) 때

함수형 컴포넌트

useEffect()

• 함수형 컴포넌트에서는 useEffect()를 사용해
  Mount, Update, Unmount 시 특정 작업을 처리

useEffect(effect, deps);
// effect: 랜더링 이후 실행할 함수 (Mount, Update)
// 	- effect 함수에서 함수를 return 시 반환하는 함수가 컴포넌트 Unmount 될 때 실행됨
// deps: 배열 값이 변하면 effect 함수 실행
// 	- 생략: Mount & Update 시 동작
//  - []: 빈 배열 -> Mount 시에만 동작
//  - [data]: 배열 안의 data 값이 Update 시 동작

// 컴포넌트 Mount or Update 될 때 동작
useEffect(() => {});

// 컴포넌트 Mount 될 때 동작
useEffect(() => {}, []);

// data 값이 Update 될 때 동작
const [data, setData] = useState();
useEffect(() => {}, [data]);

컴포넌트가 rendering 될 때마다 특정 작업을 수행

useEffect(() => {
	console.log('렌더링이 완료되었습니다.');
    console.log( "name : ", name, " & email : ", email)
})

useEffect(() => {
	console.log('처음 렌더링될 때만 실행됨!!');
}, []);

• Mount 될 때만 실행된다.
• Mount: 최초 rendering

useEffect()

• 특정 값이 바뀔 때만 실행하게 하고 싶다면?

useEffect (() => {
	console.log(name);
}, [name]);     // 함수형 컴포넌트

• 컴포넌트가 unmount 되기 직전에 작업을 수행하고 싶다면?
  => cleanup(뒷정리 함수) 이용하기
  return 으로 함수 반환하기

useEffect (() => {
	console.log("effect");
    console.log(name);
    
    return () => {
    	console.log("cleanup");
        console.log(name);
    };
});

실행 예시

import { useState, useEffect } from 'react';

const myComponent = (props) => {
	const { number } = porps;
    const [text, setText] = useState('');
    
    useEffect(() => {
    	// Mount 시점에 실행
        console.log('Funcitional Component | mount!');
        
        // Unmount 시점에 시행
        return () => {
        	console.log('Functional Component | unmount');
        }
    }, []);
    
    // Mount & Update 시점에 실행
    useEffect(() => {
    	console.log('Functional Component | update!');
    });
    
    
    // text 가 바뀔 때만 실행
    useEffect(() => {
    	console.log('Functional Component | text update!');
    }, [text]);
    
    return (
    <>
    	<p>MyComponent {number}</p>
        <input
        	type="text"
            value={text}
            onChange={(e) =>. setText(e.target.value)}
        />
    </>
    );
};

const LifeCycleFunc = () => {
	const [number, setNumber] = useState(0);
    const [visible, setVisible] = useState(true);
    
    const changeNumberState = () => {
    	setNumber(number + 1);
    };
    
    const changeVisibleState = () => {
    	setVisible(!visible);
    };
    
    return (
    	<>
        	<button onClick={changeNumberState}>PLUS</button>
            <button onClick={changeVisibleState}>ON/OFF</button>
            {visible && <MyComponent number={number} />}
        </>
    );
};

export default LifeCycleFunc;

결론

리액트의 주기 lifecycle에 대해 알아봣으며 함수형 컴포넌트에서는 useEffect()를 사용해서 작업을 하는 것을 알게 되었다. useEffect()의 사용방법과 use가 들어가는 hooks 에 대해 더 공부할 필요성을 느꼈다.

참고

[코딩온] 웹개발자 풀스택 과정 14주차 ppt