State

1. 컴포넌트 내의 상태 -> 자신의 출력값을 변경

• props는 순수함수이기 때문에 변경할 수 없다.
• 하지만 어떤 값을 컴포넌트 내에서 변경하고 보여주고 싶다면 state 사용

2. Class 컴포넌트 -> State LifeCycle

• 클래스 컴포넌트는 State의 생명주기별로 메소드가 있다.
• 그것들을 통해 state를 관리할 수 있다.

3. Functional 컴포넌트 -> 훅으로 관리

• 함수형 컴포넌트에서는 훅으로 state를 관리한다

4. 유의사항 -> 직접 수정X/ 비동기적일 수 있음

• State를 직접 바꿔버리면 그 값은 리렌더링이 되지 않는다.

// 클래스형 컴포넌트
import React, { Component } from 'react'

export default class ClassComponent extends Component {
    constructor(props) {
        super(props);
        // 상태관리 및 기본값 세팅
        this.state = { date: new Date() };
    }
    // 컴포넌트가 그려지자마자 호출
    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }
    // 컴포넌트가 사라지기 직전에 호출되게 함
    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }
    // Class 컴포넌트에서 그려줄 jsx를 리턴해줌
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

// 함수형 컴포넌트

export default function FunctionalComponent() {
    // 함수형 컴포넌트에서의 state 관리 및 초기화를 하는 Hook
    // 클래스 컴포넌트의 this.state = { date: new Date() };와 동일
    const [date, setDate] = useState(new Date())

    const tick = () => {
        setDate(new Date())
    }
 
    // 마운트 되자마자 동작하게 하는 Hook
    // 클래스 컴포넌트의 componentDidMount()와 동일
    useEffect(() => {
        const interval = setInterval(() => {tick()}, 1000)
        // 클래스 컴포넌트의 componentWillUnmount()와 동일
        return () => {
            clearInterval(interval)
        }
    }, [])


    return (
        <div>
            <h1>Hello, Function</h1>
            <h2>It is {date.toLocaleTimeString()}.</h2>
        </div>
    );

}

Component LifeCycle

모든 컴포넌트는 여러 종류의 "생명주기 메소드:를 가지며, 이 메소드를 오버라이딩 하여 특정 시점에 코드가 실행되도록 설정할 수 있다.

1. 마운트
   
   아래 메소드들은 컴포넌트의 인스턴스가 생성되어 DOM상에 삽입될 때에 순서대로 호출된다.

constructor()

render()

componentDidMount()

2. 업데이트
   
   props 또는 state가 변경되면 갱신이 발생한다. 아래 메소드들은 컴포넌트가 다시 렌더링 될 때 순서대로 호출된다.

render()
componentDidUpdate()

3. 마운트 해제
   
   컴포넌트가 DOM상에서 제거될때 호출된다.

componentWillUnmount()

4. 컴포넌트 생명주기

• constructor -> state 초기화 및 메소드 바인딩
• componentDidMount -> DOM노드 초기화 및 데이터 fetch
• componentWillUnmount -> 타이머 제거 및 요청 취소 및 구독 해제
• Functional Component -> hook으로 대부분 구현 가능

LifeCycle 예제

import React, { Component } from 'react'

export default class LifeCycle extends Component {
    constructor(props){
        super(props);
        console.log('constructor')
        this.state = {date: new Date()};
    }

    componentDidMount(){
        console.log('componentDidMount')
        this.timerID  = setInterval(() => this.tick(), 1000)
    }
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }

    componentWillUnmount(){
        console.log('componentWillUnmount')
        clearInterval(this.timerID)
    }

    tick(){
        console.log('tick')
        this.setState({date:new Date()})
    }
  render() {
    console.log('render')
    return (
      <div>

      </div>
    )
  }
}

// Constructor-> render-> componentDidMount -> componentWillUnmount -> componentDidMount -> tick -> render -> componentDidUpdate
// 함수형 컴포넌트에서 useState는 초기값을 정하고 그 값을 우리가 바꾸면 useEffect가 계속 불려와 짐
// 클래스형 컴포넌트에서는 마운트 시에 componentDidMount가, 업데이트 됏을때는 componentDidUpdate가 계속 불려짐
// 즉 클래스형 컴포넌트는 그때그때 변경에 따라 그려질때마다 자기가 선언해 둔 메소드를 사용함