React에 대하여

프론트엔드 개발을 더 효율적이게 도와주는 라이브러리, React에 대해 알아보려 한다.

참고로 React 공식 문서를 보고, 좀 더 잘 이해하고자 블로그에 정리하는 것이다.

 

React 로고

 

React는 페이스북에서 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

컴포넌트 단위로 코드를 작성하여, UI를 구성한다.

 

 

1. React를 사용하는 이유

 

상태에 따른 뷰만 간단하게 설계하면 된다.

데이터가 변경될 때 변경되는 컴포넌트만 갱신하고 렌더링하기 때문에 효율적이다.

(컴포넌트가 뭘 말하는 것인지는 사용하는 법에 있는 코드를 보면 좀 더 이해가 빠를 것 같다.)

이런 선언적 뷰는 코드를 알아보기 쉽고 디버그하기 쉽게 만들어준다.

 

또한, React는 컴포넌트 기반으로 개발된다. 이 컴포넌트를 조합하여 UI를 만든다.

 

컴포넌트 로직은 템플릿이 아니라 자바스크립트로 작성되기 때문에, 다양한 형식의 데이터를 앱 안에서 주고 받을 수 있고, DOM과 별개로 상태를 관리할 수 있다.

 

+) 장점들을 쉽게 설명해둔 블로그가 있어 바로가기를 남겨둔다.

React: #1 React의 탄생배경과 특징

 

 

 

 

2. 사용하는 방법

 

컴포넌트란 작고 독립적인 코드의 파편이다.

React는 여러 종류의 컴포넌트가 있다고 한다.

이 중, React.Component를 상속받아 컴포넌트를 만들어 본다.

 

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}<h1>
          <ul>
            <li>Instagram</li>
            <li>WhatsApp</li>
            <li>Oculus</li>
          <ul>
      </div>
    );
  }
}

 

여기서 ShoppingList는 React 컴포넌트 클래스 또는 React 컴포넌트 타입이다.

retern 안에 있는 코드는 JSX라는 것이다. React 구조를 쉽게 작성할 수 있도록 해준다.

props라는 매개변수를 받아와, render 함수를 통해 뷰 계층 구조를 반환한다.

이렇게 만든 컴포넌트는 다음과 같이 사용한다.

 

<ShoppingList name="Mark" />

 

or

<ShoppingList name="Mark"></ShoppingList>

 

ShoppingList 태그 안의 name이란 속성에 주어진 값은 props로 전달된다.

즉, ShoppingList 컴포넌트 클래스의 this.props.name에 들어갈 값이란 것이다.

 

React Developer Tools라는 확장 프로그램으로 크롬, 파이어폭스의 개발자 도구에서 React 컴포넌트 트리를 검사할 수 있다.

 

더 자세한 내용은 공식 문서의 자습서를 통해 알 수 있다.

자습서: React 시작하기 – React

 

자습서를 차근차근 따라하면 React에 대해 조금씩 이해가 된다.

 

 

 

 

3. LifeCycle API

 

React의 컴포넌트가 생성되고 업데이트될 때 실행되는 LifeCycle API가 있다.

(LifeCycle API 중에서 최신 리액트 버전에서 사라지고 다른 이름으로 대체된 API들은 마지막에 따로 정리해두었다.)

 

1) 컴포넌트 생성될 때, constructor

 

constructor(props) {
  super(props);
}

 

컴포넌트 생성자 함수 constructor,

컴포넌트가 새로 만들어질 때마다 호출되는 함수이다.

 

 

2) 컴포넌트가 화면에 나타났을 때 호출되는 componentDidMount

 

componentDidMount() {}

 

해당 컴포넌트가 필요로 하는 데이터를 요청(ajax)하는 경우,

DOM을 사용하는 작업을 하는 경우 등,

컴포넌트가 화면에 나타난 후 실행해야 하는 작업을 진행한다.

 

 

3) 컴포넌트 업데이트될 때 필요한 컴포넌트만 리렌더링할 수 있도록 해주는 shouldComponentUpdate

 

shouldComponentUpdate(nextProps, nextState) {
  //return false;이면 업데이트 안 함
  return true;
}

 

기본적으로 true를 반환하는 함수이다.

따로 조건을 작성하여 false를 반환하게 해서, 어떤 조건에서는 render 함수를 호출하지 않도록 할 수 있다.

 

현재 컴포넌트의 상태가 업데이트되지 않았지만,

부모 컴포넌트가 리렌더링되면, 자식 컴포넌트도 리렌더링된다. (렌더링 - render 함수가 호출된다는 뜻)

변화가 없었다면 DOM 조작이 일어나지 않긴 하지만, 컴포넌트가 많을 땐 쓸데없는 낭비가 일어날 수 있는데, 이 함수로 그걸 막아줄 수 있다.

 

 

4) 컴포넌트가 업데이트된 후 실행되는 componentDidUpdate

 

componentDidUpdate(prevProps, prevState, snapshot) {

}

 

render 함수를 호출하고 난 후 실행된다.

 

 

5) 컴포넌트를 제거할 때 호출하는 componentWillUnmount

 

componentWillUnmount() {
}

 

컴포넌트를 제거하면서 같이 제거할 이벤트가 있을 때 이 함수로 제거 이벤트를 호출할 수 있다.

 

 

 

 

즉, constructor -> componentDidMount -> shouldComponentUpdate -> componentDidUpdate -> componentWillUnmount 순서이다.

 

 

 

+) 지금은 없어지고 다른 API로 대체된 것들

1) componentWillMount

componentWillMount() {
}

 

컴포넌트가 화면에 뜨기 직전에 호출되는 API이다.

이젠 UNSAFE_componentWillMount()라는 이름으로 사용된다.

하지만 여기서 하는 역할은 constructor와 componentDidMount로도 충분히 할 수 있어서,

필요없는 것 같다.

 

2) componentWillReceiveProps

componentWillReceiveProps(nextProps) {
}

 

새로운 props를 받게 됐을 때 호출되는 API입니다.

이때 props를 조회하면 아직 업데이트 전의 데이터가 조회된다.

이 API도 UNSAFE_componentWillReceiveProps()라는 이름으로 사용된다고 한다.

이 API는 상황에 따라 새로운 API인 getDerivedStateFromProps로 대체될 수도 있다고 한다.

 

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

static getDerivedStateFromProps(nextProps, prevState) {
  //setState를 하는 게 아니라, 특정 props가 바뀔 때 설정될 state 값을 리턴하는 식으로 사용된다.
  if(nextProps.value !== prevState.value) {
    return {value: nextProps.value};
  }
  return null;
}

이 코드대로 했을 때,

변화하는 props 값과 기존 props 값이 다르면 그 새로 변화된 props 값을 반환해서 state 값을 바꾼다.

null을 리턴하면 따로 업데이트할 것이 없다는 의미라고 한다.

 

3) componentWillUpdate

componentWillUpdate(nextProps, nextState) {
}

 

shouldComponentUpdate에서 true가 반환됐을 때만 호출되는 함수이다.

이 함수가 호출되고 render 함수가 호출된다.

이 기능은 getSnapshotBeforeUpdate로 대체된다.

 

getSnapshotBeforeUpdate()가 발생하는 시점은 render가 실행된 후, DOM의 변화가 일어나기 전에 일어난다.

이 함수에서 리턴하는 값을 componentDidUpdate에서 3번째 파라미터 값으로 받아올 수 있다.

 

 

 

+) 컴포넌트에 에러가 발생했을 때 유효한 API

render 함수에서 에러가 발생하면 componentDidCatch라는 함수가 실행된다.

componentDidCatch(error, info) {
  this.setState({
    error: true
  });
}

 

렌더링될 때 오류를 if문이나 defaultProps를 통해 사전에 방지하는 게 더 좋겠지만,

그래도 놓칠 수 있는 버그들은 이 함수로 잡아주고,

필요시엔 에러 내용을 서버로 기록하게 해주면 될 것이다.

 

 

 

 

출처)

React 공식 문서 - React - 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 

VELOPERT.LOG - 누구든지 하는 리액트 5편:LifeCycle API