React - 리액트 교과서 4장 학습내역 (React 컴포넌트의 상태 객체)

React:

 React 컴포넌트의 상태 객체

이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다.

| 시작하기에 앞서

리액트에서 컴포넌트의 상태는 매우매우 중요한 개념이다. 리액트의 장점이 되기도 하는 부분이 되기 때문이다. (책에서 한개 장 밖에읽을 수 있다면 이장을 읽기 바란다고 했을 정도이다.) React 컴포넌트의 상태 객체를 이용하면 가치있고 상호작용이 뛰어난 react 애플리케이션을 만들수 있다. 상태는 리액트 컴포넌트에 데이터를 저장하고, 데이터의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심개념이다.

| 리액트 컴포넌트의 상태란?

리액트의 상태는 컴포넌트의 변경가능한 데이터 저장소다. 리액트팀에서는 컴포넌트는 상태머신입리다 라고 말하고 있다고도 한다. 속성과상태는 둘다 뷰를 갱신하기 위해 사용하지만, 서로 다른 목적으로 사용한다고 한다. 상태객체에 접근할때는 props와 마찬가지로 이름을 이용한다. 이름은 this.state 객체의 속성이다. (여기서 말하는 객체속성이란 객체 키 또는 객체 프로퍼티를 의미한다.)

| 상태 객체 다루기

상태 객체를 다루려면 접근하고 갱신하는 방법, 초기상태 설정방법을 알아야한다. 아래에서 알아보자.

> 초기상태 설정하기

• render()에서 상태 데이터를 사용하려면 먼저 상태를 초기화해야한다. 

• 초기 상태를 설정하려면 react component를 사용하는 es6 클래스의 생성자에서 this.state를 선언한다. 

• 반드시 super()에 props을 전달하여 실행해야 한다. 그렇지 않으면 부모클래스(React.component)의 기능을 정상적으로 사용할 수 없다. super()를 호출하는 이유는 그러지 않으면, 부모클래스의 생성자가 실행되지 않는다.

• 주의할점은 this.state의 값은 반드시 객체여야 한다.

class exmaple extends React.component{
  constructor(){
    super(props)
    this.state= {}
  }
}

> 상태 갱신하기

• 클래스 메서드인 this.setState(data,callbak)을 사용하면 상태를 변경 할 수 있다. 이 메서드를 싱행하면 react는 전달하는 data를 현재 상태에 병합하고 render()를 호출한다.

• setState()에 콜백함수를 사용할 수 있다는 점은 중요하다. setState()가 비동기로 작동하기 때문이다. 새로운 상태에 의존하는 경우, 콜백함수를 사용해야 새로운 상태가 적용된 후에 필요한 작업을 수행할 수 있다. 

• 갱신될 새로운 상태 값에 의존하는 코드를 작성하면 버그가 생길 수 있는데, 상태 객체가 이전값을 가진 이전의 상태 객체로 남아있기 때문이다. -> 나는 이부분이 매우 중요하다 고 생각되는데, life cycle을 생각하며 api에서 데이터를 받아오는 시점과 렌더링되는 시점을 서로 연결해야 하는 부분이 리액트로 개발을 진행하다보면 매우 많다. 이런 flow를 잘 관리할수 있어야 된다고 생각된다.

• setState()가 render()를 실행시킨다는 점도 기억해야 한다. 대부분의 경우를 이방식으로 처리한다. 

React는 필요한 HTML만 갱신한다. 필요한 최소한의 DOM요소에만 정확히 영향을주는것이다. 그리고, 이러한 것은 상태를 통해 가능하다.

중요한점: this.state.name = 'new name' 이런 식으로 상태를 변경하는 것은아무 효과가없다. 이렇게 하면 렌더링을 다시 하지도 않고, 실제 dom을 갱신할 수도 없다. setState를 거치지 않고 상태를 변경하는것은 안티패턴이므로 피해야 한다.

> 상태 객채와 속성

• 상태 객체와 속성은 모두 클래스의 멤버이며, this.state와 this.props를 말한다. 

• 이것이 유일한 공통점이고, 상태 객체와 속성의 주요한 차이점 중 하나는 상태 객체는 변경 가능한 반면, 속성은 변경이 불가능하다는 점이다.

• 또 다른 차이점은 속성은 부모 컴포넌트에서 전달하지만, 상태는 부모 컴포넌트가 아닌 자체 컴포넌트 자체에서 정의 한다는 점이다. 

• 그러므로 속성은 뷰 생성 시에 정해지고, 정적인 상태로 유지된다. 반면에 해당 컴포넌트에서 설정되고 갱신된다.

• 그리고 중요한점은 모든 컴포넌트가 상태를 가져야 하는것은 아니다.

| 상태 객체 다루기

• 상태 비저장 컴포넌트는 상태 객체가 없으며, 컴포넌트 메서드 또는 다른 리액트의 라이프 사이클 이벤트 또는 메서드를 갖지 않는다. 

• 상태 비저장 컴포넌트의 목적은 오직 뷰를 렌더링 하는것이다. 이 컴포넌트가 할 수 있는 것은 속성을 전달받아 처리하는 것 뿐이다. 

• 상태비저장 컴포넌트는 속성을 입력받아 ui 엘리먼트를 출력하는 간단한 함수이다.

• 상태 비저장 컴포넌트는 예측할수 있다는 이점이있는데, 출력을 결정하는 입력이 한 가지 뿐이기 때문이다.이러한 예측 가능성은 유지보수와 디버깅이 편리하다는것을 의ㅁ한다. 실제로 상태를 가지지 않는 것이 리액트의 가장 바람직한 사례라고 볼 수 있다. 상태비저장 컴포넌트는 더 많이 사용할수록, 상태저장 컴포넌트는 더 적게 사용할수록 더 좋다.

| 상태비저장 컴포넌트와 상태저장 컴포넌트의 비교

• 상태 비저장 컴포넌트를 사용하는 이유는, HTML 렌더링을 처리하는 것으로 충분한경우, 별도의 인스턴스를 생성하거나, 라이프사이클 메서드를 사용하지 않아도 되는 상태비저장 컴포넌트가 더 선언적이고 잘 작동한다.

• 기본적으로 html렌더링 하는것이 전부일때 상태비저장 컴포넌트를 사용하면 중복을 줄이고, 더 간결하게 컴포넌트 작성이 가능하다.

• 상태비저장 컴포넌트가 반드시 정적이라고 생각해서는 안된다. 다른 속성을 전달하면 상태비저장 컴포넌트의 모습을 바꿀 수 있다.

• 상태비저장 컴포넌트를 여러개의 상태저장 컴포넌트와 적절히 사용하면 좀 더 유연하고, 간단하며, 더나은 설계를 할 수 있다.

• 보통 react를 다루는 개발자가 상태비저장 컴포넌트를 이야기하면 함수나 화살표함수 문법으로 작성한 컴포넌트(함수형 컴포넌트)를 의미한다.

• 클래스를 사용해서 상태비저장 컴포넌트를 만들순 있지만, 나중에 상태를 추가해버리면 그 목적을 잃어버릴수있기 때문에 권장하진 않는다고 한다.

• 상태비저장 컴포넌트의 핵심은 단순하게 유지해야하고, 상태 객체나 메서드를 추가하지 말아야 하는점, 그리고 외부 메서드나 함수를 호출하지 않는점이다. -> 예측가능성을 깨뜨리기 때문, 순수성에도 위반

| 요약

• 상태 객체는 변경이 가능하다.

• this.setState는 전체가 아닌, 전달한 항목만 갱신한다.

• 상태비저장 컴포넌트는 react를 다룰때 선호되는 방식이다.