리액트 기초 - 4일차

본 글은 강의- Minjun Kim님의 누구든지 하는 리액트를 수강하면 작성되었습니다.

LifeCycle API 설명

일단 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들이 있다.

 

constructor

constructor(props){
	super(props);
}

컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 constructor가 호출된다. 자신이 가지고 있는 생성자 함수를 먼저 후출하고 이후에 하고싶은 작업을 실행한다.

componentWillMount

새로운 버전에서는 없어진 함수이다.

 

componentDidMount

 

이 함수는 컴포넌트가 화면에 나타나게 됐을 때 호출된다. 외부 라이브러리 연동(D3, masonry, etc)이나 컴포넌트에서 필요한 데이터(Ajax, GraphQL, etc)를 요청한다. 또는 DOM에 관련된 작업(이벤트 등록, 스크롤 설정, 크기 읽어오기 등)

아래에서는 constuctor호출 후 componentDidMount가 호출된다.

 

컴포넌트 업데이트 

 

componentWillReceiveProps()는 더이상 사용되지 않는다.

 

[New] static getDerivedStateFromProps()

props로 받아온 값을 state로 동기화 하는 작업을 해야할 땨 사용된다.

기존의 componentWillReceiveProps()와 달리 setStae를 하는 것이 아니라 특정 props가 바뀔 때 설정하고 설정하고 싶은 state값을 리턴하는 형태로 사용된다

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
//return false하면 업데이트를 안함
//return this.props.checked !==nextProps.checked
	return true;
}

컴포넌트 업데이트 성능을 최적화한다. 

이 코드를 추가하면 10 이 되면 값이 나타나지 않고 렌더링 되지 않다가11이 되면 true를 리턴하면 출력된다.

 

componentWillUpdate는 더이상 사용되지 않는다.

[NEW] getSnapshotBeforeUpdate( )

이 API가 발생하는 시점은 다음과 같다.

1. render( )

2. getSnapshotBeforeUpdate( )

3. 실제 DOM에 변화 발생

4.componentDidUpdate

업데이트 직전의 dom상태를 리턴하여 여기서 리턴하는 값을 componentDidUpdate에서 3번째 파라미터로 받아온다.

getSnapshotBeforeUpdate(prevProps, prevState) {
    // DOM 업데이트가 일어나기 직전의 시점입니다.
    // 새 데이터가 상단에 추가되어도 스크롤바를 유지해보겠습니다.
    // scrollHeight 는 전 후를 비교해서 스크롤 위치를 설정하기 위함이고,
    // scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데, 
    // 이미 구현이 되어있다면 처리하지 않도록 하기 위함입니다.
    if (prevState.array !== this.state.array) {
      const {
        scrollTop, scrollHeight
      } = this.list;

      // 여기서 반환 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있습니다.
      return {
        scrollTop, scrollHeight
      };
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      const { scrollTop } = this.list;
      if (scrollTop !== snapshot.scrollTop) return; // 기능이 이미 구현되어있다면 처리하지 않습니다.
      const diff = this.list.scrollHeight - snapshot.scrollHeight;
      this.list.scrollTop += diff;
    }
  }

componentDidUpdate

이 API는 컴포넌트에서 render() 를 호출하고난 다음에 발생하게 됩니다. 이 시점에선 this.props 와 this.state 가 바뀌어있습니다. 그리고 파라미터를 통해 이전의 값인 prevProps 와 prevState 를 조회 할 수 있습니다. 그리고, getSnapshotBeforeUpdate 에서 반환한 snapshot 값은 세번째 값으로 받아옵니다.

componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      console.log('value 값이 바뀌었다!', this.props.value);
    }
  }

값이 10이 되어 더이상 화면에 나타나지 않으면 호출된다.

 

컴포넌트에 에러 발생

 

componentDidiCatch

예를 들어 render에서 오류발생하면 앱 자체가 돌아가지 않게 된다. 이럴 때 에러를 출력하거나 그 정보를 알려주도록 할 수 있다.

ccomponentDidCatch(error, info){
	console.log(error);
    console.log(info);
}

state에 error변수를 선언해 에러가 발생하면 setState로 값이 입력되면 해당 함수에서 알림을 줄 수 있다.

주의할 점은 부모 컴포넌트에서 써야한다.

 

 

개발환경 설치하기

node.js를 설치한다. npm 대신 yarn을 사용하면 성능에 개선이 있을 수 있다. 따라서 yarn도 설치해준다.

그리고 git bash와 visual code도 설치해야한다.

 

Create React App 사용하기

<npx create-react-app [파일 이름]>으로 만들어준 후 npm start로 실행시켜보자