📖 State, LifeCycle Hook

1. state 정의

👉 앞서 컴포넌트에 대해 언급 할 때 클래스형 컴포넌트는 함수형 컴포넌트와 달리 상태(state) 설정이 가능하다고 언급한적이 있다. state는 클래스 컴포넌트의 상태 정보이다. 또한 상태 정보는 클래스 안에서만 접근이 가능하다.

✍ Exmple

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      DRAMA: [
        {
          id: "1",
          channel: "JTBC",
          title: "부부의 세계",
          desc:
            "사랑이라고 믿었던 부부의 연이 배신으로 끊어지면서 소용돌이 빠지는...",
          image: "https://i.postimg.cc/526YTpsh/image.jpg"
        },
        {
          id: "2",
          channel: "tvN",
          title: "슬기로운 의사생활",
          desc:
            "누군가는 태어나고 누군가는 삶을 끝내는 인생의 축소판, 불리는 병원에...",
          image: "https://i.postimg.cc/7YPTMq0Y/image.jpg"
        }
      ]
    };
  }
  render(){
    return(
      <div className="app">
        <h1>Current Drama</h1>
        <DramaChart data={this.state.DRAMA} />
      </div>
    );
  }
}
export default App;

1-2. state update

👉 React의 state는 불변(lmmutable)객체이다. 즉 변하지 않는 객체여서 state에 변경 대신 새롭게 교체하는 방법을 사용해 불변 객체를 유지해야 된다. setState() 메서드를 사용해 업데이트 및 교체 해야 한다.

👉 필요하다면 업데이트 한 후 콜백(Callback)함수를 실행하도록 처리할 수 있다.

✍ Exmple

this.setState(
  { activeIndex: 10 }, 
  () => console.log('state.activeIndex가 업데이트 되었습니다.')
)

2. class field

👉 클래스 필드(class field)는 클래스 컴포넌트의 상태를 보다 손쉽게 설정할 수 있다. 이 구문을 사용하면 생성자 메서드를 사용하지 않아도 된다.

📌 클래스 필드는 ES 표준 명세에 제안된 문법이지만 아직 표준으로 채택되지는 않았다. 하지만 Babel을 사용하므로 정상 작동한다.

✍ Exmple

class App extends Component {
  state = {
      DRAMA: [
        {
          id: "1",
          channel: "JTBC",
          title: "부부의 세계",
          desc:
            "사랑이라고 믿었던 부부의 연이 배신으로 끊어지면서 소용돌이 빠지는...",
          image: "https://i.postimg.cc/526YTpsh/image.jpg"
        },
        {
          id: "2",
          channel: "tvN",
          title: "슬기로운 의사생활",
          desc:
            "누군가는 태어나고 누군가는 삶을 끝내는 인생의 축소판, 불리는 병원에...",
          image: "https://i.postimg.cc/7YPTMq0Y/image.jpg"
        }
      ]
  };
  render(){
    return(
      <div className="app">
        <h1>Current Drama</h1>
        <DramaChart data={this.state.DRAMA} />
      </div>
    );
  }
}
export default App;

2. LifeCycle Hook

👉 생명은 시간에 흐름에 따라 변환한다. 컴포넌트 또한 마찬가지로 프로세스의 특정 시간에
코드를 실행하는 다양한 라이프 사이클 훅이 제공된다.

👉 컴포넌트의 라이프 사이클은 크게 나누면 3단계로 진행한다.
1. 마운팅(Mounting) : 생성
2. 업데이팅(Updating) : 갱신
3. 언 마운팅(Unmounting) : 제거

2-1. Mounting

👉 컴포넌트 인스턴스를 만들고 DOM을 삽입할 때 다음 순서대로 훅 메서드가 실행한다.

📌 componentDidMount 제외한 나머지 훅 메서드는 가상(Virital DOM)을 조작한다.
📌 componentDidMount는 실제 DOM을 조작할 수 있지만, 컴포넌트에서 관리해주지 못하기 때문에 예상치 못한 부작용이 생길 수 있다.

LifeCycle Hook	설명
constructor()	컴포넌트 생성 시점에 호출
static getDerivedStateFromProps()	전달된 상태 및 속성을 가져와 설정하는 시점에 호출
render()	컴포넌트 렌더링 시점에 호출
componentDidMount()	DOM에 마운트 된 이후 시점에 호출

✍ Exmple

class LifeCycleHook extends Component {
  constructor(props) {
    super(props);
    console.log('LifeCycleHook 컴포넌트 생성');
  }
  // 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (업데이트)
  static getDerivedStateFromProps(props, state) {
    console.log('LifeCycleHook 컴포넌트 디라이브');
     return null;
  }
  render() {
    console.log('컴포넌트 렌더링');
    return <div />
  }
  componentDidMount() {
    console.log('컴포넌트 마운트 된 시점');
  }
}

2-1. Updating

👉 업데이트 훅은 props 또는 state가 변경될 경우 발생한다. 즉, 컴포넌트가 다시 렌더링 될 때 다음 순서로 실행된다.

LifeCycle Hook	설명
static getDerivedStateFromProps()	전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (업데이트)
shouldComponentUpdate()	컴포넌트 업데이트 예정 시점에 호출 (업데이트 하거나, 안 하거나)
render()	컴포넌트 렌더링 (업데이트)
getSnapshotBeforeUpdate()	컴포넌트 업데이트 전 스냅샷 가져오는 시점에 호출
componentDidUpdate()	컴포넌트 업데이트 이후 시점에 호출

✍ Exmple

class LifeCycleHook extends Component {
  // 전달된 상태 및 속성을 가져와 설정하는 시점에 호출 (업데이트)
  static getDerivedStateFromProps(props, state) {
    console.log('(업데이트) 전달된 속성 및 상태 접근');
    return null;
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('업데이트', nextProps);
    return true // false를 반환할 경우 컴포넌트 렌더링이 취소
  }
  render() {
    console.log('컴포넌트 렌더링');
    return <div />
  }
  getSnapshotBeforeUpdate = (prevProps, prevState) => {
     console.log("DOM commit 되기 전에 스냅샷 저장");
    
     return {
       message: "this is snapshot"
    };
    
  };
    
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("업데이트 된 시점", snapshot.message);
  }
}

2-3. Mounting

👉 컴포넌트가 DOM에서 제거될 때 실행되는 훅입니다.

LifeCycle Hook	설명
componentWillUnmount()	컴포넌트 제거 예정 시점에 호출

✍ Exmple

class LifeCycleHook extends Component {
  componentWillUnmount() {
    console.log('DOM에서 제거 되기 직전에 실행');
  }
}

2-4. Error

👉 컴포넌트 렌더링, 라이프 사이클 훅이 실행될 때 오류가 발생한 경우 호출된다.

LifeCycle Hook	설명
static getDerivedStateFromError()	자손 컴포넌트 오류 발생 시 호출
componentDidCatch()	자손 컴포넌트 오류 발생 시 호출

✍ Exmple

class LifeCycleHook extends Component {
  state = { hasError: false }
  // 자식 컴포넌트의 오류를 throw한 후 실행
  static getDerivedStateFromError(error) {
    // throw된 오류가 감지되면, hasError 상태 값을 true 처리
    return { hasError: true }
  }
  render() {
    // 오류 발생 시, 렌더링 과정에서 오류 메시지를 반환
    if (this.state.hasError) {
      return <h1>오류가 발생했습니다.</h1>
    }
    return <div />
  }
}