[React] 클래스형 vs 함수형

👉  클래스형 컴포넌트와 함수형 컴포넌트의 생김새

 

📍 클래스형 컴포넌트

class ClassComp extends React.Component{
	render(){
	return (
    	<div className = "container">
        	<h2>class style component</h2>
            <p>Number : {this.state.number}</p>
            <p>Date : {this.state.date}</p>
            <input type="button value="random" onClick={}></input>
    		)
    	}
    }

 

📍 함수형 컴포넌트

function FuncComp(props){
	return (
    	<div className="container">
        	<h2>function style component</h2>
            <p>Number : {number}</p>
            <p>Date : {_date}</p>
            <input type="button" value="random" onClick={
            	function(){
                setNumber(Math.random());
                }
            }></input>
    )

 

현재 실무에서는 함수형 컴포넌트를 사용하며
클래스형 컴포넌트를 알아야하는 이유는
과거에 만들어진 코드들을 읽고, 함수형으로 바꿀 수 있어야하기 때문이다.

 

클래스형과 함수형 컴포넌트의 생김새를 비교해보면

실제 뷰에 그려지는 부분을 말하는 'return' 부분에서 클래스형은 render(){} 가 붙는 것을 알 수 있다.

함수형은 자신 자체가 render 이기 때문에 render가 붙지 않는다.

 

---

 

👉  클래스형 컴포넌트와 함수형 컴포넌트의 차이점

-

👀  함수형 컴포넌트의 급부상

과거에는 클래스형 컴포넌트에서만 state를 사용할 수 있었고,

컴포넌트의 생성->업데이트->삭제 주기(생로병사)를 말하는 '라이프 사이클'도 클래스형에서만 사용할 수 있었다.

함수형에서는 단순한 컴포넌트만을 만들어 사용할 수 있었던 것이다. (클래스 컴포넌트의 심부름꾼 정도였다..)

 

하지만! 함수형 컴포넌트에 Hook 이라는 아이가 탄생하게 되면서 

함수형에서도 state와 라이프 사이클을 사용할 수 있게 되었다.

(이로 인해 클래스형 컴포넌트보다 더 높은 자리를 차지하게 됐다!)

라이프 사이클을 이용할 수 있다면, 컴포넌트 변화 상황에 맞춰 그 때 그 때 우리가 원하는 타이밍에 원하는 행동을 넣어줄 수 있다는 것이다.

 

---

👀  Hook 사용법

function FuncComp(props){
	// number라는 이름을 가지는 애를 setNumber라는 함수대로 변할 수 있게 할 것이라는 뜻이다.
    // number라는 이름을 가지는 애와 setNumber의 시스템은 아래에서 우리가 만들어서 쓰면 된다.
    // React.useState() <- 괄호 안에는 number가 가질 맨 처음 값(초기값)을 넣으면 된다.
	const [number, setNumber] = React.useState(null);
	return (
    	<div className="container">
        	<h2>function style component</h2>
            <p>Number : {number}</p> //number를 여기에 넣어줬다. 
            <p>Date : {_date}</p>
            <input type="button" value="random" onClick={
            	function(){
                setNumber(Math.random());
                }
            }></input>
    )
//버튼 onClick에 setNumber 함수로 랜덤한 숫자가 나오게하는 식을 넣었기 때문에
//버튼을 누를 때마다 number부분에 랜덤한 숫자가 나타난다.

---

👀  라이프사이클 ( 컴포넌트의 생로병사 )

 

🤜  클래스 컴포넌트에서의 라이프사이클

-

 

📍  componentWillMount()

컴포넌트에서 사용할 코드들을 가져다 두는 부분이다.

 

📍  render()

코드가 화면에 그려지는 부분이다. mount가 되는 부분이라고도 말한다.

 

📍  componentDidMount()

컴포넌트가 모두 실행된 상태를 말한다. 실행이 모두 끝난 후 처리할 일이 있다면 여기에 설정해둘 수 있다.

 

상위에 적어두었던 클래스 컴포넌트 생김새 예시에서 각 부분을 명시해보았다.

class ClassComp extends React.Component{
	componentWillMount(){
    	//render 전에 준비해 둘 코드들이 있는 곳이다.
    }
    componentDidMount(){
    	//render가 모두 실행되고 (컴포넌트가 모두 실행되고) 실행되었으면 하는 부분들을 적는 곳이다.
    }
	render(){
    //render가 되는 부분이다.
	return (
    	<div className = "container">
        	<h2>class style component</h2>
            <p>Number : {this.state.number}</p>
            <p>Date : {this.state.date}</p>
            <input type="button value="random" onClick={}></input>
    		)
    	}
    }

 

컴포넌트를 만들어두었으니

컴포넌트가 사용 될 때마다 컴포넌트에 있는 state값이 변경될테고 그 때마다 render가 일어나게 된다.

 

📍  shouldComponentUpdate()

render가 꼭 일어나야하는지 여부를 결정해주는 곳이다.

 

📍  componentWillUpdate()

컴포넌트에 있는 state가 변경되면 실행된다.

 

📍  componentDidUpdate()

state 변경이 완료되면 실행된다.

 

class ClassComp extends React.Component{
	componentWillMount(){
    	//render 전에 준비해 둘 코드들이 있는 곳이다.
    }
    componentDidMount(){
    	//render가 모두 실행되고 (컴포넌트가 모두 실행되고) 실행되었으면 하는 부분들을 적는 곳이다.
    }
    shouldComponentUpdate(nextProps, nextState){
    	// return true 라고 적으면 render가 실행된다.
        return true;
    }
	render(){
    //render가 되는 부분이다.
	return (
    	<div className = "container">
        	<h2>class style component</h2>
            <p>Number : {this.state.number}</p>
            <p>Date : {this.state.date}</p>
            <input type="button value="random" onClick={}></input>
    		)
    	}
    }

 

---

 

🤜  함수형 컴포넌트에서의 라이프사이클

-

 

📍  React.useEffect()

컴포넌트가 실행 완료되고(render 완료되고) 그 후에 실행되었으면 하는 것을 넣어두는 곳이다.

클래스형 컴포넌트에서 componentDidMount() 와 componentDidupdate() 가 가졌던 효과를

함수형 컴포넌트에서는 useEffect()가 가지는 것이다.

 

useEffect의 Effect는 side effect의 준말인데, 원래 side effect 는 부작용을 의미하지만

여기서는 부가적인 효과라는 의미를 가진다.

컴포넌트 자체가 메인이고, 그 뒤에 실행되는 부분인 useEffect 가 부가적으로 실행되는 부분이라는 뜻이다.

useEffect는 여러개 사용할 수 있다.

 

📍  React.useEffect() 의 불필요한 실행 없애기

const [number, setNumber] = React.useState();

// 컴포넌트의 return 부분이 모두 뷰에 그려지는 작업이 끝나면
// 아래의 useEffect 안에 있는 내용이 실행된다.
// 콘솔에 hello라고 뜨고, 뷰에 있는 title number가 변경되도록 했다.
UseEffect(function(){
	console.log("hello")
    document.title = number;
})

만일 number state가 변경되지 않았는데도 컴포넌트가 실행된다는 이유로 useEffect 내용이 실행된다면??

불필요한 실행을 하는 것이다. 

컴포넌트가 실행된다고 하더라도 number state가 변경될 때에만 useEffect가 실행되도록 하려면 아래와 같이 [ ] 안에 number를 넣어주면 된다.

[ ] 안에 들어가 있는 부분이 변경실행될 때에만 useEffect가 실행된다.

const [number, setNumber] = React.useState();

// 컴포넌트의 return 부분이 모두 뷰에 그려지는 작업이 끝나면
// 아래의 useEffect 안에 있는 내용이 실행된다.
// 콘솔에 hello라고 뜨고, 뷰에 있는 title number가 변경되도록 했다.
UseEffect(function(){
	console.log("hello")
    document.title = number;
}, [number]);

 

📍  컴포넌트가 맨 처음 실행될 때에만 React.useEffect() 을 실행시키기

React.useEffect()가 컴포넌트가 맨 처음 생성될 때 딱 한번만 실행되는 것이다.

const [number, setNumber] = React.useState();

// 컴포넌트의 return 부분이 모두 뷰에 그려지는 작업이 끝나면
// 아래의 useEffect 안에 있는 내용이 실행된다.
// 콘솔에 hello라고 뜨고, 뷰에 있는 title number가 변경되도록 했다.
UseEffect(function(){
	console.log("hello")
    document.title = number;
}, []);

//[]안에 아무것도 넣지 않으면 된다.