Create React App 4주차 - 클래스 & 함수 타입 컴포넌트와 라이프사이클

클래스 & 함수 타입 컴포넌트

새로운 폴더를 만들고 새 프로젝트를 만든 후 터미널에서 create-react-app을 설치한다.

npx create-react-app .

npm start

 

 

 

 

 

 

 

클래스 & 함수 방식 컴포넌트의 props

클래스 방식의 컴포넌트에서는 외부에서 전달된 props 값을 받을 때 this를 사용하지만 함수 방식의 컴포넌트에서는 파라미터를 이용하여 props 값을 받는다. 함수 방식의 인자는 아무 이름으로 정해도 된다.

// App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div classame="container">
      <h1>Hello World</h1>
      <FuncComp initNumber={2}></FuncComp>
      <ClassComp initNumber={2}></ClassComp>    
      </div>
  );
}

// 함수 방식으로 작성한 컴포넌트
function FuncComp(props) {
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {props.initNumber}</p>
    </div>
  );
}

// 클래스 방식으로 작성한 컴포넌트
class ClassComp extends React.Component {
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : {this.props.initNumber}</p>
      </div>
    );
  }
}

export default App;

 

클래스 방식 컴포넌트의 state와 함수 방식 컴포넌트의 Hook

// App.js

...

// 클래스 방식으로 작성한 컴포넌트
class ClassComp extends React.Component {
  state = {
    number:this.props.initNumber
  }
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p>
        <input type="button" value="random" onClick={
          function() {
            this.setState({number:Math.random()});
          }.bind(this)
        }></input>
      </div>
    );
  }
}

...

클래스 방식의 컴포넌트에서 setState 사용하기

1. 버튼 클릭

2. setState함수를 통해서 state값을 랜덤 넘버로 변경

3. render 메서드를 재호출

 

// App.js

import React, {useState} from 'react';
import './App.css';

...

// 함수 방식으로 작성한 컴포넌트
function FuncComp(props) {
  var numberState = useState(props.initNumber);
  var number = numberState[0];
  var setNumber = numberState[1];

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

...

함수 방식의 컴포넌트에서 Hook 사용하기

1. 버튼 클릭

2. useState함수를 이용하여 state값을 랜덤 넘버로 변경

(useState함수는 첫 번째 요소로 state의 초기값을 전달하고 두 번째 요소로 state값을 바꾸는 함수를 전달한다.)

 

---

useEffect

클래스 스타일의 라이프 사이클

1. (shouldComponentUpdate)

2. componentWillUpdate

3. render

4. componentDidUpdate

 

함수 스타일의 라이프 사이클

 

 

컴포넌트가 랜더링된 이후에 실행하고 싶은 작업이 있다면 useEffect를 이용한다.

useEffect 훅은 클래스형 컴포넌트의 componentWillMount나 componentDidUpdate와 같은 효과를 가져온다.

// App.js

import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
  return (
    <div classame="container">
      <h1>Hello World</h1>
      <FuncComp initNumber={2}></FuncComp>
      <ClassComp initNumber={2}></ClassComp>    
      </div>
  );
}

var funcStyle = 'color:blue';
var funcId = 0;

// 함수 방식으로 작성한 컴포넌트
function FuncComp(props) {
  
  var numberState = useState(props.initNumber);
  var number = numberState[0];
  var setNumber = numberState[1];

  var [_date, setDate] = useState((new Date()).toString());

  useEffect(function() {
    console.log('%cfunc => useEffect '+(++funcId), funcStyle);
    document.title = number + ' : ' + _date;
  });

  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>
      <input type="button" value="random" onClick={
        function() {
          setDate((new Date()).toString());
        }
      }></input>
    </div>
  );
}
...
export default App;

 

Cleanup

render 함수가 호출되고 useEffect가 실행되기 전에 뭔가 정리하는 작업이 필요한 경우에 사용한다. useEffect의 첫 번째 인자로 전달한 함수의 반환값으로 구현한다.

// Cleanup 예시

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
}

 

useEffect 함수는 두 번째 인자로 전달받은 배열 내 요소의 값이 바뀌었을 때만 첫 번째 인자인 콜백 함수가 호출된다.

랜덤 넘버 버튼을 누른 경우(인자로 number 전달

날짜 버튼을 누른 경우(인자로 _date 전달)

 

// App.js

import React, {useState, useEffect} from 'react';
import './App.css';

...
/// number가 변경되었을 때 실행.
  useEffect(function() {
    console.log('%cfunc => useEffect number return (componentDidMount & componentDidUpdate)'+(++funcId), funcStyle);
    document.title = number;
    return function() {
      console.log('%cfunc => useEffect number return (componentDidMount & componentDidUpdate)'+(++funcId), funcStyle);
    }
  }, [number]);

/// _date가 변경되었을 때 실행.
  useEffect(function() {
    console.log('%cfunc => useEffect _date (componentDidMount & componentDidUpdate)'+(++funcId), funcStyle);
    document.title = _date;
    return function() {
      console.log('%cfunc => useEffect _date (componentDidMount & componentDidUpdate)'+(++funcId), funcStyle);
    }
  }, [_date]);

...
export default App;

* 참고 : number나 _date 대신에 빈 배열([])을 전달하면 최초 1회만 실행된다.  componentDidMount와 같은 효과를 얻고 싶을 때 사용한다.