[React 공식문서 공부하기] - State and Lifecycle

Lee Jeong Min·2022년 1월 3일

React 공식문서 공부

목록 보기

5/5

이 페이지는 React 컴포넌트 안의 state와 생명주기에 대한 개념을 소개한다.

엘리먼트 렌더링 파트에서 다룬 시계 예시를 다시 살펴보자. 렌더링 된 출력값을 변경하기 위해 ReactDOM.render() 를 호출하였다.

function tick()	{
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배울 것이다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매 초 스스로 업데이트 할 것이다.

시계를 캡슐화하는 것으로 시작해보자.

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

그러나 여기에는 중요한 요건이 누락되었는데, Clock 컴포넌트가 타이머를 설정하고 매초 UI를 업데이트하는 것이 Clock 의 구현 세부사항이 되어야한다.

이상적으로 한 번만 코드를 작성하고 Clock 이 스스로 업데이트하도록 만들어보자.

ReactDOM.render(<Clock />, document.getElementById('root'));

이것을 구현하기 위해서 Clock 컴포넌트에 "state"를 추가해야 한다.

State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다.

함수에서 클래스로 변환하기

다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있다.

React.Component 를 확장하는 동일한 이름의 ES6 class를 생성한다.
render() 라고 불리는 빈 메서드를 추가한다.
함수의 내용을 render() 메서드 안으로 옮긴다.
render() 내용 안에 있는 props를 this.props로 변경한다.
남아있는 빈 함수 선언을 삭제한다.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}

Clock 은 이제 함수가 아닌 클래스로 정의된다.

render 메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 <Clock /> 을 렌더링 하는 경우 Clock 클래스의 단일 인스턴스만 사용된다. 이것은 로컬 state와 생명주기 메서드와 같은 부가적인 기능을 사용할 수 있게 해준다.

render() 메서드만 사용하여 업데이트 된 결과가 렌더링 되기 때문에 함수안의 state의 유지와 생명 주기 메서드등을 사용할 수 있음.

클래스에 로컬 State 추가하기

세 단계에 걸쳐서 date 를 props에서 state로 이동해 보겠다.

render() 메서드 안에 있는 this.props.date 를 this.state.date로 변경한다.
초기 this.state를 지정하는 class constructor 를 추가한다.

클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야한다.

<Clock /> 요소에서 date prop을 삭제한다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}

ReactDOM.render(<Clock />, document.getElementById('root'));

다음으로 Clock 이 스스로 타이머를 설정하고 매초 스스로 업데이트 하도록 만들어 보자.

생명주기 메서드를 클래스에 추가하기

많은 컴포넌트가 있는 애플리케이션에서 컴포넌트가 삭제될 때 해당 컴포넌트가 사용 중이던 리소스를 확보하는 것이 중요하다.

Clock이 처음 DOM에 렌더링 될 때마다 타이머를 설정 하려고 한다. 이것은 React에서 "마운팅"이라고 한다.

또한 Clock에 의해 생성된 DOM이 삭제될 때마다 타이머를 해제하려고 한다. 이것은 React에서 "언마운팅"이라고 한다.

컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동시킬 수 있게 만드는 메서드들을 "생명주기 메서드" 라고 부른다.

componentDidMount() 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행된다. 이 장소가 타이머를 설정하기 적당한 장소이다.

componentDidMount() {
  this.timerID = setInterval(
    () => this.tick(),
    1000
  )
}

this (this.timerId) 에서 어떻게 타이머 ID를 제대로 저장하는지 주의하자.

this.props가 React에 의해 스스로 설정되고 this.state가 특수한 의미가 있지만, 타이머 ID와 같이 데이터 흐름안에 포함되지 않는 어떤 항목을 보관할 필요가 있다면 자유롭게 클래스에 수동으로 부가적인 필드를 추가해도 된다.

componentWillUnmount() 생명주기 메서드 안에 있는 타이머를 제거해보자.

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

마지막으로 Clock 컴포넌트가 매초 작동하도록 하는 tick()이라는 메서드를 구현해보자.

이것은 컴포넌트 로컬 state를 업데이트하기 위해 this.setState()를 사용한다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    )
  }
  
  componentWillMount() {
    clearInterval(this.timerID);
  }
  
  tick() {
    this.setState({date: new Date()});
  }
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

이제 시계는 매초 업데이트된다.

위 구현과정을 요약하면 다음과 같다.

<Clock /> 이 ReactDOM.render()로 전달되었을 때 React는 Clock 컴포넌트의 constructor를 호출한다. Clock이 현재 시각을 표시해야 하기 때문에 현재 시각이 포함된 객체로 this.state를 초기화한다. 나중에 이 state를 업데이트 한다.
React는 Clock 컴포넌트의 render() 메서드를 호출한다. 이를 통해 React는 화면에 표시되어야할 내용을 알게되고 DOM을 업데이트 한다.
Clock 출력값이 DOM에 삽입되면, React는 componentDidMount() 생명주기 메서드를 호출한다. 그 안에 Clock 컴포넌트는 매초 컴포넌트의 tick() 메서드를 호출하기 위한 타이머를 설정하도록 브라우저에 요청한다.
매초 브라우저가 tick() 메서드를 호출한다. 그 안에서 Clock 컴포넌트는 setState() 에 현재 시각을 포함하는 객체를 호출하면서 UI 업데이트를 진행한다. setState() 호출 덕분에 React는 state가 변경된 것을 인지하고 화면에 표시될 내용을 알아내기 위해 render() 메서드를 다시 호출한다. 이 때 render() 메서드 안의 this.state.date 가 달라지고 렌더링 출력값은 업데이트된 시각을 포함한다. 이에따라 React는 DOM을 업데이트한다.
Clock 컴포넌트가 DOM으로부터 한 번이라도 삭제된 적이 있다면 React는 타이머를 멈추기 위해 componentWillUnmount() 생명주기 메서드를 호출한다.

State 올바르게 사용하기

setState()에 대해 알아야 할 세 가지가 있다.

직접 State를 수정하지 마라.

// Wrong
this.state.comment = 'Hello'; // 컴포넌트 다시 렌더링 X

// Correct
this.setState({comment: 'Hello'});

this.state를 초기화 할 수 있는 곳은 constructor 내부이다.

State 업데이트는 비동기적일 수 있다.

React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있다.

this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안된다.

예를 들어, 다음 코드는 카운터 업데이트에 실패할 수 있다.

// Wrong
this.setState({counter: this.state.counter + this.props.increment,})

이를 수정하기 위해 객체보다는 함수를 인자로 사용하는 다른 형태의 setState() 를 사용한다. 그 함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받아들일 것이다.

// Correct
this.setState((state, props) => ({counter: state.counter + props.increment}))

위에서는 화살표 함수를 사용했지만 일반적인 함수에서도 정상적으로 작동한다.

State 업데이트는 병합된다.

setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.

예를 들어, state는 다양한 독립적인 변수를 포함할 수 있다.

constructor(props) {
  super(props);
  this.state = {
    post: [],
    comments: []
  }
}

별도의 setState() 호출로 위 변수들을 독립적으로 업데이트할 수 있다.

  componentDidMount() {
    // post 변수 업데이트
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    // comments 변수 업데이트
    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

병합은 얕게 이루어져서 this.setState({comments})는 this.state.posts에 영향을 주진 않지만 this.state.comments는 완전히 대체된다. (새로운 값으로)

데이터는 아래로 흐른다.

부모 컴포넌트나 자식 컴포넌트 모두 특정 컴포넌트가 상태가 있는지 또는 상태가 없는지 알 수 없고, 그들이 함수나 클래스로 정의되어있는지에 대해 관심을 가질 필요가 없다.

이 때문에 state는 종종 로컬 또는 캡슐화라고 불린다. state가 소유하고 설정한 컴포넌트 이외에는 어떠한 컴포넌트에도 접근할 수 없다.

컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

<FormattedDate date={this.state.date} />

FormattedDate 컴포넌트는 date 를 자신의 props로 받고, 이것이 Clock 의 state로 부터 왔는지, Clock 의 props에서 왔는지, 수동으로 입력한 것인지 알지 못한다.

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

일반적으로 이를 하향식 또는 단방향식 데이터 흐름이라고 한다. 모든 state는 항상 특정한 컴포넌트가 소유하고 있고 그 state로 부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 "아래"에 있는 컴포넌트에만 영향을 미친다.

모든 컴포넌트가 완전히 독립적이라는 것을 보여주기 위해 App 렌더링하는 세 개의 <Clock>을 만들었다.

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

각 Clock은 자신만의 타이머를 설정하고 독립적으로 업데이트 한다.

React 앱에서 컴포넌트가 상태가 있는 지 없는지에 대한 것은 시간이 지남에 따라 변경될 수 있는 구현 세부 사항으로 간주한다. 상태가 있는 컴포넌트 안에서 상태가 없는 컴포넌트를 사용할 수 있으며 그 역 또한 가능하다.

Lee Jeong Min

It is possible for ordinary people to choose to be extraordinary.

이전 포스트

[React 공식문서 공부하기] - State and Lifecycle