20210604 React02 : Event Handling, Component Lifecycle, Lifecycle 변경된 사항 (16.3버전 이후), getDerivedStateFromProps, getSnapshotBeforeUpdate, ComponentDidCatch

5 분 소요

React 02

Event Handling

HTML DOM 에 클릭하면 이벤트가 발생하고, 그에 맞는 변경이 일어남
JSX에 이벤트를 설정할 수 있음
camelCase로만 사용가능
- 예) onClick, onMouseEnter
이벤트에 연결된 자바스크립트 코드는 함수임
- 이벤트 = {함수}와 같이 씀
실제 DOM요소들에만 사용 가능함
- 리액트 컴포넌트에 사용하면, 그냥 props로 전달함

Function Component 이벤트 연결

JSX에 바로 이벤트 적고, 해당 이벤트에 함수를 붙여줌
함수 컴포넌트에서는 state, 라이프 사이클을 사용하지 않기 때문에, 상태값을 활용할 수는 없다.

function Component() {
  return (
    <div>
      <button
        onClick={() => {
          console.log("clicked");
        }}
      >
        클릭
      </button>
    </div>
  );
}
ReactDOM.render(<Component />, document.querySelector("#root"));

Class Component 이벤트 연결

상태값 state을 활용하는 경우
이벤트에 달 함수를 이원화 시켜 관리하는 2가지 방법
- 해당 함수를 Arrow 함수로 표기하는 방법
- 그냥 class에서의 메소드 정의 형식 표기방법(prototype)

해당 함수를 Arrow 함수로 표기하는 방법

객체의 값으로 이전 state를 spread를 사용해서 가져오고, 값을 덮어씌워서 setState로 state값을 변경시킴

// 이벤트에 달 함수를 Arrow 함수로 표기하는 경우
class Component extends React.Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭</button>
      </div>
    );
  }

  click = () => {
    console.log("clicked");
    this.setState((state) => ({
      ...state,
      count: state.count + 1,
    }));
  };
}
ReactDOM.render(<Component />, document.querySelector("#root"));

class 메소드 정의 표기방법(prototype)

일반적인 prototype method처럼 사용하지만, 해당 method의 경우 method가 this 바인딩 하는데 문제가 생김
해당 형태로 표기하면 constructor에서 해당 method에 this를 바인딩 시켜줘야 함

class Component extends React.Component {
  // method가 this를 찾을 수 있게 바인딩 해줘야함
  constructor(props) {
    super(props);
    this.click = this.click.bind(this);
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭</button>
      </div>
    );
  }

  click() {
    console.log("clicked");
    this.setState((state) => ({
      ...state,
      count: state.count + 1,
    }));
  }
}
ReactDOM.render(<Component />, document.querySelector("#root"));

Component Lifecycle

리책트 컴포넌트는 탄생부터 죽음까지 여러지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할수 있게 해줌

Declarative 성질

컴포넌트가 그려지는 때 (탄생)

lnitialization (생성) : constructor 가 불리는 상태로 props, state의 초기값이 설정되는 구간
Mounting :
- componentWillMount : render가 되기 전
- render (최초 render, mount)
- componentDidMount : render가 된 후

컴포넌트가 사라지는 때 (죽음)

Unmounting :
- componentWillUnmount : 컴포넌트가 사라지기 전

컴포넌트가 업데이트 되는 때

Updation : props 나 states가 변경 되는 때
- props
  - componentWillReceiveProps
  - shouldComponentUpdate : 컴포넌트가 업데이트 되어야 하는지 아닌지를 판단 (true, false)
    - 불필요하게 render되는 것을 방지하기 위함
  - componentWillUpdate : render 되기 직전
  - render
  - componentDidUpdate
- states
  - shouldComponentUpdate : 컴포넌트가 업데이트 되어야 하는지 아닌지를 판단 (true, false)
    - 불필요하게 render되는 것을 방지하기 위함
  - componentWillUpdate : render 되기 직전
  - render
  - componentDidUpdate
Props만 should 전에 componentWillReceiveProps가 존재함

컴포넌트 생성 및 마운트 (Mount)

constructor -> componentWillMount -> render! -> componentDidMount! -> setInterval! -> render! -> setInterval! -> render! -> …

class App extends React.Component {
  state = {
    age: 39,
  };
  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(() => {
      console.log("setInterval");
      this.setState((state) => ({ ...state, age: state.age + 1 }));
    }, 1000);
  }
}
ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));

컴포넌트 props , state 변경 (Update)

props, state 변경시 -> componentWillReceiveProps (Props만) -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
componentWillReceiveProps
- props를 새로 지정했을 때 바로 호출
- state 변경에 반응 X
  - props의 값에 따라 state를 변경해야 하는경우 -> setState를 이용해서 state 변경
  - 다음 이벤트로 각각 가지 않고, shouldComponentUpdate에서 모아 한번에 변경됨
shouldComponentUpdate
- porps만 변경되어도, state만 변경되어도, 둘다 변경되어도 반응함
- newProps와 new State를 인자로 해서 호출
- return type이 boolean으로 -> true면 render , false면 render 호출 안함
  - should를 구현하지 않으면 default값으로 true가 되어 있음
componentWillUpdate
- 컴포넌트가 재 랜더링 되기 직전 호출
- 여기서 setState 같은거 쓰면 안됨
componentDidUpdate : 컴포넌트가 재 랜더링을 마치면 불림

class App extends React.Component {
  state = {
    age: 39,
  };
  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 }));
    }, 10000);
  }
  // Update
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps", nextProps);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    return true; // 조건부로 update 제어 가능
  }
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate", nextProps, nextState);
  }
  componentDidUpdate(prevProps, prevState) {
    // 이전 props를 보여주니까, 전에 이것을 업데이트 했음을 알려줌
    console.log("componentDidUpdate", prevProps, prevState);
  }
}
ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));

컴포넌트 제거 (Unmount)

componentWillUnmount : 요소가 없어지기 전에 실행함

class App extends React.Component {
  state = {
    age: 39,
  };
  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>
    );
  }
  componentWillMount() {
    console.log("componentWillMount!");
  }
  componentDidMount() {
    console.log("componentDidMount!");
    // 요소가 사라지더라도 함수는 계속 돌고 있으므로 함수를 클래스 멤버변수에 담아
    // willUnmount에서 clear해서 없애줌
    this.interval = setInterval(() => {
      this.setState((state) => ({ ...state, age: state.age + 1 }));
    }, 10000);
  }
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps", nextProps);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    return true; // 조건부로 update 제어 가능
  }
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate", nextProps, nextState);
  }
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate", prevProps, prevState);
  }
  componentWillUnmount() {
    // 해당 함수를 함수에 연결해서 없앰
    clearInterval(this.interval);
  }
}
ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));

라이프사이클 변경된 사항 (16.3버전 이후)

라이프 사이클
constructor
~~componentWillMount~~ -> getDerivedStateFromProps
render
componentDidMount
~~componentWillReceiveProps~~ -> getDerivedStateFromProps
shouldComponentUpdate
render
~~componentWillUpdate~~ -> getSnapshotBeforeUpdate
DOM에 적용
componentDidUpdate
componentWillUnmount

getDerivedStateFromProps

componentWillMount에 대체해서 나온 라이프사이클 method
props를 받아서 state를 조절할 수 있었는데 이제는 그 기능을 메인으로 하고 있음
일반 라이프사이클과는 다르게 클래스 안에서 static method로 만들어 주어야 함
return 부분에 새로운 state를 설정해 줄 수 있음
새로운 props가 들어오면 state가 return으로 바뀜
update에 의해서 render가 실행되기 전에도 실행됨 (즉, render실행전에 무조건 실행된다고 보면 됨)
시간의 흐름에 따라 변하는 props에 state 가 의존하는 경우 주로 사용됨

class App extends React.Component {
  state = {
    age: 39,
  };
  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>
    );
  }
  // static method로 설정
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps", nextProps, prevState);
    return {
      age: 390,
    }; // return 부분에 새로운 state를 설정할 수 있음
  }
}

getSnapshotBeforeUpdate

render메서드가 호출되고, DOM에 적용되기 직전에 실행되는 라이프사이클
prevProps, prevState 를 인자로 사용하여 변한 props, states와 그전의 값들을 비교한 결과를 DidUpdate때 사용하고자 하는 경우 사용함

let i = 0;
class App extends React.Component {
  state = { list: [] };
  render() {
    return (
      <div id="list" style=>
        {this.state.list.map((i) => {
          return <div>{i}</div>;
        })}
      </div>
    );
  }
  componentDidMount() {
    setInterval(() => {
      this.setState((state) => ({
        list: [...state.list, i++],
      }));
    }, 3000);
  }
  // 과거 state 와 변한 현재 state를 비교하여 snapshot 값으로 null 또는 차이를 넘김
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.list.length === this.state.list.length) return null;
    const list = document.querySelector("#list");
    return list.scrollHeight - list.scrollTop;
  }
  // snapshot값을 받아서 변경함
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("DidUpdate-snapshot", snapshot);
    if (snapshot === null) return;
    const list = document.querySelector("#list");
    list.scrollTop = list.scrollHeight - snapshot;
  }
}
ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));

ComponentDidCatch (컴포넌트 에러 캐치)

기존에는 부분적인 에러 발생시 앱이 모두 동작을 못했음
ComponentDidCatch를 통해 문제발생시 error 화면을 보여줄수 있게 되었음
하위 컴포넌트에서 error발생시 해당 부모 컴포넌트에서 error말고 다른 것을 보여 줄 수 있음
단, 자기자신에 대한 error는 catch를 못함 -> 최상위 컴포넌트에 달아야 함
Error Boundaries라는 라이브러리를 보통 사용함

class App extends React.Component {
  state = {
    hasError: false,
  };
  render() {
    if (this.state.hasError) {
      return <div>예상치 못한 에러 발생함!!</div>;
    }
    return <div>정상 페이지</div>;
  }
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
}
ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));

Twitter Facebook LinkedIn

Taeyoung Kim(RaccoonCode96)

20210604 React02 : Event Handling, Component Lifecycle, Lifecycle 변경된 사항 (16.3버전 이후), getDerivedStateFromProps, getSnapshotBeforeUpdate, ComponentDidCatch

React 02

Event Handling

Function Component 이벤트 연결

Class Component 이벤트 연결

해당 함수를 Arrow 함수로 표기하는 방법

class 메소드 정의 표기방법(prototype)

Component Lifecycle

Declarative 성질

컴포넌트가 그려지는 때 (탄생)

컴포넌트가 사라지는 때 (죽음)

컴포넌트가 업데이트 되는 때

컴포넌트 생성 및 마운트 (Mount)

컴포넌트 props , state 변경 (Update)

컴포넌트 제거 (Unmount)

라이프사이클 변경된 사항 (16.3버전 이후)

getDerivedStateFromProps

getSnapshotBeforeUpdate

ComponentDidCatch (컴포넌트 에러 캐치)

공유하기

참고

[Design Pattern] MVC 패턴

[Node.js] 백준 - 기본 수학 문제 1 : 달팽이는 올라가고 싶다, ACM호텔, 부녀회장이 될테야

[Node.js] 백준 - 기본 수학 문제 1 : 손익분기점, 벌집O(1), 분수찾기O(1)

[Node.js] 백준 - 함수&문자열 문제 : 셀프 넘버, 한수, 아스키 코드, 숫자의 합, 알파벳 찾기, 문자열 반복, 단어 공부, 단어의 개수, 상수, 다이얼, 크로아티아 알파벳, 그룹 단어 체커