12 - state와 클래스형 컴포넌트(2)

1. 클래스형 컴포넌트의 일생 알아보기

 

 

- constructor() 함수 알아보기

 

App.js 파일 실행, 기존에 있는 코드에 그래도 사용하면 된다.

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log('hello');
  }
  .
  .
  .
  render() {
    console.log('render');
    return (
      <div>
        <h1>The numbe....  

클래스형 컴포넌트에 constructor() 함수와 console.log()에 아무 문장이나 출력한다.

render() 함수에도 console.log() 아무 문장이나 출력해보자.

어떤 함수가 먼저 실행되는지 본다.

 

개발자도구의  Console 탭을 보자.

constructor() 함수안의 console.log() 가 먼저 실행된다.

중요한것은 함수의 실행순서.

함수의 실행 순서만 알아로 리액트 앱 만들때 무슨 작업을 할지 결정할 수 있음.

 

 

- componentDidMount() 함수 알아보기

 

class App extends React.Component {
  .
  .
  .
  componentDidMount() {
    console.log('component rendered');
  }
  .
  .
  .
  render() {
    console.log("i'm rendering");    <---- " 따옴표 주의
    return (
      <div>
        <h1>The numbe....  

App 클래스안 아무대나 componentDidMount() 함수를 써주고,

console.log() 에 문장을 써준다. 

 

- 실행 순서 -

1. constructor() 함수
2. render() 함수
3. componentDidMount() 함수

 

 

- componentDidUpdate() 함수 알아보기

class App extends React.Component {
  .
  .
  .
  componentDidUpdate() {
    console.log('i just updated');
  }
  .
  .
  .
  render() {
    console.log("i'm rendering");    <---- " 따옴표 주의
    return (
      <div>
        <h1>The numbe....  

componentDidUpdate() 함수는 화면이 업데이트되면 실행된다.

앞서 만든 숫자 증감 앱에서 Add나 Minus 버튼 눌러서 setState() 함수가 실행되면

자동으로 render() 함수가 실행되면서 화면이 업데이트 된다.

 

 

- componentWillUnmount() 함수 알아보기

 

이 함수는 컴포넌트가 죽을 때를 말한다.

 

class App extends React.Component {
  .
  .
  .
  componentWillUnmount() {
    console.log('Goodbye, world');
  }
  .
  .
  .
  render() {
    console.log("i'm rendering");    <---- " 따옴표 주의
    return (
      <div>
        <h1>The numbe....  

아직은 컴포넌트가 화면에서 떠나게 만드는 코드를 작성한 적이 없다.

다음에서 천천히 알아본다.

 

---

여기까지가 클래스형 컴포넌트에서 실행되는 생명주기 함수다.