React 3

수빈·2022년 8월 4일

React

목록 보기

18/25

얼렁뚱땅 공부했던 React 다시 공부하기~~!

Component Lifecycle (~version 16.3)

Component 생성 및 마운트

constructor componentWillMount render(최초) componentDidMount

class Test extends React.Component {
  state = {
    age: 20,
  };
  constructor(props) {
    super(props);

    console.log("constructor", props);
  }
  render() {
    console.log("render");
    return (
      <div>
        <h2>
          Hello {this.props.name} - {this.state.age}
        </h2>
      </div>
    );
  }
  componentWillMount() {
    console.log("componentWillMount");
  }
  componentDidMount() {
    console.log("componentDidMount");

    //api요청, setTimeout()을 사용한다.

    setInterval(() => {
      // console.log("setInterval");
      // this.setState((state) => ({ ...state, age: state.age + 1 }));
    }, 1000);
  }
}

constructor ➡ componentWillMount() ➡ render ➡ componentDidMount 순서로 실행된다.

Component props, state 변경하기

componentWillReceiveProps (props에서만 실행) shouldComponentUpdate componentWillUpdate render componentDidUpdate

class Test extends React.Component {
  state = {
    age: 20,
  };
  constructor(props) {
    super(props);

    console.log("constructor", props);
  }
  render() {
    console.log("render");
    return (
      <div>
        <h2>
          Hello {this.props.name} - {this.state.age}
        </h2>
      </div>
    );
  }
  componentWillMount() {
    console.log("componentWillMount");
  }
  componentDidMount() {
    console.log("componentDidMount");

    setInterval(() => {
      this.setState((state) => ({ ...state, age: state.age + 1 }));
    }, 1000);
  }

componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps", nextProps);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    // true 또는 false를 리턴한다.
    // false로 리턴하는경우, props또는 state가 변경되어도 바뀐데이터로 랜더되지 않는다.
    return true;
  }
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate", nextProps, nextState);
  }
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate", prevProps, prevState);
  }
}

componentWillReceiveProps()

props를 새로 지정했을 때 바로 호출되며, state의 변경에 반응하지 않는다.
props의 값에 따라 state를 변경해야하면 setState를 이용해 변경해야한다.
➡ 다음 이벤트로 넘어가지 않고, 한번에 변경된다.

shouldComponentUpdate()

props또는 state가 변경되면 실행된다.
newProps와 newState를 인자로 호출되며 return값은 boolean이며 디폴트값은 true이다.

return true : render가 호출된다.
return false : render가 호출되지 않는다.

componentWillUpdate()

컴포넌트가 재 랜더링 되기 직전에 실행되며, setState를 사용하면 안된다.

componentDidUpdate()

컴포넌트가 재 랜더링을 마치면 실행된다.

Component 언마운트

componentWillUnmount

class Test extends React.Component {
  state = {
    age: 20,
  };
  interval = null;
  constructor(props) {
    super(props);
    console.log("constructor", props);
  }

  render() {
    console.log("render");
    return (
      <div>
        <h2>
          Hello {this.props.name} - {this.state.age}
        </h2>
      </div>
    );
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState((state) => ({ ...state, age: state.age + 1 }));
    }, 10000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
}

Component Lifecycle (version 16.3~)

~~componentWillMount~~ ➡ getDerivedStateFromProps
~~componentWillReceiveProps~~ ➡ getDerivedStateFromProps
~~componentWillUpdate~~ ➡ getSnapshotBeforeUpdate (dom에 적용직전)

getDerivedStateFromProps()

  static getDerivedStateFromProps(nextProps, prevState) {
    // 시간에따라 변경되는 props를 통해 state가 변하는경우 사용된다.
    this.contextType.log("getDerivedStateFromProps", nextProps, prevState);

    // return값이 필요하며, return으로 새로운 state를 설정할 수 있다.
    return {
      age: 200,
    };
  }

getSnapshotBeforeUpdate()

let i = 0;
class NewTest extends React.Component {
  state = {
    list: [],
  };
  render() {
    return (
      <div id="list" style={{ height: 100, overflow: "scroll" }}>
        {this.state.list.map((i) => {
          return <div>{i}</div>;
        })}
      </div>
    );
  }

  componentDidMount() {
    setInterval(() => {
      this.setState((state) => ({
        list: [...state.list, i++],
      }));
    }, 1000);
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.list.length === this.state.list.length) return null;
    const list = document.querySelector("#list");
    return list.scrollHeight - list.scrollTop;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot);
    if (snapshot === null) return;
    const list = document.querySelector("#list");
    list.scrollTop = list.scrollHeight - snapshot;
  }
}

Component 에러 캐치

componentDidCatch
didcatch를 사용해 문제가 발생했을때 에러 페이지를 보여줄 수 있다.
가장 최상위에 위치해야한다.

class NewTest extends React.Component {
  state = {
    hasError: false,
  };
  render() {
    if (this.state.hasError) {
      return <div>에러가 발생했습니다.</div>;
    }
    return <div>정상적인 페이지</div>;
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
}
export default NewTest;