[React] 기본 Hooks

State를 다루는 차이

class

class ExState extends React.Component {
	state = { count: 0 };
    render() {
    	const { count } = this.state;
        return (
        	<div>
            	<h1>{count}</h1>
        		<button onClick={this.click}>ClickButton!</button>
            </div>
        );
    }
    click = () => {
    	this.setState({ count: this.state.count + 1 });
    }
}

function

import React from 'react';


function ExState() {
	const [count, setCount] = React.useState(0);     // 배열
    return (
    	<div>
        	<h1>{count}</h1>
            <button onClick={click}>ClickButton!</button>
        </div>
    );
    
    function click() {
    	setCount(count + 1);
    }
    
}

setCount는 count의 값을 변경하고, 함수를 다시 실행하는 역할을 합니다. 

---

useState로 객체 만들기

import React from 'react';


function ExState() {
	const [state, setState] = React.useState({ count: 0 });     
    return (
    	<div>
        	<h1>{state.count}</h1>
            <button onClick={click}>ClickButton!</button>
        </div>
    );
    
    function click() {
    	setState((state) => {
        	return {
            	count: state.count + 1,
            };
        });
    }
    
}

---

function component의 변화

• Stateless Component => Stateless Functional Component
• Not Stateless Component 
• 원래 SFC라고 했지만 이제는 FC라는 약자를 사용합니다. 

useState의 등장 배경

• 컴포넌트 사이에서 상태와 관련된 로직 재사용이 어려움.
• 복잡한 컴포넌트의 이해가 어려움.
• Class는 컴파일 단계에서 최적화하기 어려움.
• this.state는 로직에서 레퍼런스를 공유하기에 문제 발생 가능성이 있음.

---

useEffect

class

class ExState extends React.Component {
	state = { count: 0 };
    render() {
    	const { count } = this.state;
        return (
        	<div>
            	<h1>{count}</h1>
        		<button onClick={this.click}>ClickButton!</button>
            </div>
        );
    }
    componentDidMount() {
    	console.log('componentDidMount', this.state.count);	
    }
    
    componentDidUpdate() {
    	console.log('componentDidUpdate', this.state.count);
    }
    
    click = () => {
    	this.setState({ count: this.state.count + 1 });
    }
}

function 

import React from 'react';


function ExState() {
	const [count, setCount] = React.useState(0);     
    React.useEffect(() => {
    	console.log("componentDidMoount");
        
        return () => {
        	// cleanup
            // 다음으로 실행될 때 먼저 실행하고 위의 구문을 실행한다.
            // componentWillUnmount
        };
    }, []);   
    
    React.useEffect(() => {
    	console.log("componentDidMount and componentDidUpdate by count", count);
        
        retrun () => {
        	// cleanup
            // 먼저 실행.
            console.log('cleanup by count', count);
        };
    }, [count]);   
    
    return ( 
    	<div>
        	<h1>{count}</h1>
            <button onClick={click}>ClickButton!</button>
        </div>
    );
    
    function click() {
    	setCount(count + 1);
    }
    
}

useEffect는 DidMount와 DidUpdate일 때 모두 실행한다. 

useEffect함수 뒤에 아무것도 넣지 않으면 항상 랜더 직후에 함수를 실행하라는 뜻이다. 

빈 배열을 넣으면  처음에만 실행하라는 뜻이다. 배열의 의미는 배열 안의 값으로 인해 리턴된 후에 실행하라 것이다.