React Life Cycle_ 디지털 시계. Form 작업

import React from "react";

class Clock2 extends React.Component{
 
    constructor(props){
        super(props)

        this.state = {date:new Date()} //state를 생성자에서 지정
    }
    //Mount: DOM 객체가 생성되고 브라우저에 나타나는 것
    //호출순서: constructor> getDerivedStateFromProps> render> componentDidMount

    showSigan(){
        this.setState({
            date:new Date()
        })
    }
    componentDidMount(){ //시스템에 의한 콜백
        //setInterval(): 일정시간간격을 두고 어떤 코드를 반복호출.
        this.timerID = setInterval(
            () => this.showSigan(),
            1000 //1초마다 호출
        );
    }
    //DOM에 렌더링 된 후 컴포넌트 출력 자료가 실행, 하단의 작업(예:타이머)을 하기에 용이하다.
    componentWillUnmount(){ //시스템에 의한 콜백
        //사용된 메모리등의 작업 마무리
        //SPA를 개발할때 메모리 누수(leak)를 방지하는 작업이 요
        clearInterval(this.timerID); //setInterval()해제
    }

    render(){

        return(
            <div>
                <h1>⏰째깍(클라스형)⏰</h1>
                <h2>{new Date().toLocaleTimeString()}입니다</h2>
                <h2>현재 시간은 {this.state.date.toLocaleTimeString()}</h2>

            </div>

        );
    }
}

export default Clock2;

 

컴포넌트에 따라 메소드가 달라진다. 두 컴포넌트의 경우를 모두 확인해보자.

 

 

1. Mount

마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다.

 

https://lktprogrammer.tistory.com/130

 

 

마운트 (Mount) 메소드 호출 순서

 

1. constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수. state의 초기값을 지정할 때 사용한다.

2. getDerivedStateFromProps : props와 state 값을 동기화할 때 사용하는 함수.

3. render : 컴포넌트의 기능과 모양새를 정의하는 함수로 리액트 요소를 반환.

4. componentDidMount : 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수.

 

2. 업데이트

컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우가 있다.

 

 

1.getDerivedStateFromProps : 마운트(Mount) 과정에서도 호출되었던 함수

2. shouldComponentUpdate : 컴포넌트를 리렌더링 할지 말지를 결정하는 함수. true를 반환하면 아래 함수들을 호출하여 업데이트에 따른 리렌더링을 진행하며 false를 반환할경우 리렌더링을 하지 않고 아래 함수도 실행되지 않는다. 

3. render : 새로운 값을 사용하여 View를 리렌더링한다.

4. getSnapshotBeforeUpdate : 변경된 요소에 대하여 DOM 객체에 반영하지 직전에 호출되는 함수.

5. ComponentDidUpdate : 컴포넌트 업데이트 작업이 끝난 리렌더링 후에 호출되는 함수. 

 

3. 언마운트 (UnMount)

컴포넌트가 DOM에서 제거되는 것을 언마운트(UnMount)라고 한다. 호출되는 함수는 하나로 componentWillUnmount 함수. 해당 컴포넌트가 제거되기 직전에 호출된다.

 

 

---

 

메인화면 App.js

import Clock1 from "./exam/Clock1";
import Clock2 from "./exam/Clock2";
import Clock3 from "./exam/Clock3";
import MyComponent from "./exam/myComponent";
import MyComponent2 from "./exam/myComponent2";
import MyForm from "./exam/MyForm";

function App() {
  return (
    <>
      <h2>리액트 생명주기 연습용 : 디지털시계</h2>
      <Clock1></Clock1> {/* 고정시계 */}
      <hr/>
      <Clock2></Clock2>{/* 실시간렌더링. 클라스컴포넌트*/}
      <hr/>
      <Clock3></Clock3>{/* 실시간렌더링. 함수컴포넌트 */}
      <hr/>
      <MyComponent></MyComponent>{/* 콘솔로생명주기확인 */}
      <hr/>
      <MyComponent2></MyComponent2>{/*콘솔로생명주기확인+ 텍스트칸 */}
      <hr/><hr/>
      Form작업(생명주기와 상관무.)<br/>{/* 사용자와 웹 페이지 간 상호 작용 */}
      <MyForm/>
    </>
  );
}

export default App;

 

 

고정시계

import React from "react";

class Clock1 extends React.Component{
    render(){
        return(
            <div>
                <h1>⏰고정시계⏰</h1>
                <h2>지금은 {new Date().toLocaleTimeString()}</h2>
            </div>
        );
    }
}

export default Clock1;

 

 

실시간시계_ 클래스형 컴포넌트

Mount: DOM 객체가 생성되고 브라우저에 나타나는 것
호출순서: constructor> getDerivedStateFromProps> render> componentDidMount

 

이해하기 쉽도록 해당 부분의 설명을 주석으로 달아 두었다. 

 

import React from "react";

class Clock2 extends React.Component{
    constructor(props){
        super(props)

        this.state = {date:new Date()} //state를 생성자에서 지정
    }
    
    showSigan(){
        this.setState({
            date:new Date()
        })
    }
    componentDidMount(){ //시스템에 의한 콜백
        this.timerID = setInterval(
            () => this.showSigan(),
            1000 //1초마다 호출
        );
    }
    componentWillUnmount(){ //시스템에 의한 콜백
        //사용된 메모리등의 작업 마무리
        //SPA를 개발할때 메모리 누수(leak)를 방지하는 작업이 요
        clearInterval(this.timerID); //setInterval()해제
    }

    render(){

        return(
            <div>
                <h1>⏰째깍(클라스형)⏰</h1>
                <h2>{new Date().toLocaleTimeString()}입니다</h2>
                <h2>현재 시간은 {this.state.date.toLocaleTimeString()}</h2>

            </div>

        );
    }
}

export default Clock2;

 

클래스형 컴포넌트는 props로 기본 constructor를 호출해야한다.

 

setInterval(): 일정시간간격을 두고 어떤 코드를 반복호출.

 

DOM에 렌더링 된 후 컴포넌트 출력 자료가 실행되며, 타이머와 같은 작업을 하기에 용이하다.

 

실시간시계_ 함수형 컴포넌트

import { useState, useEffect } from "react";

const Clock3 = () => {
    //useState로 state를 초기화
    const [date, setDate] = useState(new Date());

    //useEffect를 사용하면 내부적으로 생명주기메소드가 수행된다
    useEffect(() => {
        //클래스의 componentDidMount()를 아래처럼 기술
        const timerID = setInterval(() => showSigan(), 1000);

        //클래스의 componentWillMount()를 아래처럼 기술
        return () => {
            clearInterval(timerID);
        }
    }, []);

    const showSigan = () => {
        setDate(new Date());
    }

    return(
        <div>
            <h1>🕰️틱톡(함수형)🕰️</h1>
            <h2>시각 : {new Date().toLocaleTimeString()}</h2>
            <h2>현 시간 : {date.toLocaleTimeString()}</h2>
        </div>
    );
}

export default Clock3;

 

---

 

Form 작업

사용자와 웹페이지간 상호작용에 사용될 수 있다.

import { useState } from "react";

function MyForm(){
    const [formData, setFormData] = useState({
        irum:'',
        nai:'',
        menu:'파전'
    })

    const dataChange = (e) => {
        const name = e.target.name; //form태그 내의 name
        const value = e.target.value;
        setFormData({
            ...formData,
            [name]:value
        });
    }

    const dataSubmit = (e) => {
        e.preventDefault();
        const {nai} = formData; //formData객체에서 nai 추출해 nai변수에 치환

        if(!Number(nai) || isNaN(Number(nai))){ //nai 입력자료검사
            alert('나이는 숫자로 입력하세요');
        }else{
            alert('처리 성공');
        }
    }
    return(
        <>
        <h4>
            결과: {formData.irum}, 넌 {formData.nai}세. 선택한 음식은 {formData.menu}.  
        </h4>
        <form onSubmit={dataSubmit}>
            이름 : <input type="text" name="irum" onChange={dataChange} /><br/>
            나이 : <input type="text" name="nai" onChange={dataChange} /><br/>
            메뉴 :
            <select name="menu" value={formData.menu} onChange={dataChange} >
                <option value="치킨">치킨</option>  
                <option value="파전">파전</option>    
                <option value="삼겹살">삽겹살</option>
            </select><br/><br/>
            <button type="submit">전송</button>

        </form>
        </>
    )
}

export default MyForm;

 

 

---

https://cafe.daum.net/flowlife/QbpR/72

Re: React의 생명 주기(Life Cycle)

https://lktprogrammer.tistory.com/130

[React] 리액트 - 컴포넌트 생명 주기 (Component Life Cycle)