티스토리 뷰
리액트 교과서 4장 / React 컴포넌트의 상태 객체
주제
- react component의 state 객체에 대한 이해
- state 객체를 다루는 법
- state객체와 props의 비교
- 상태를 가진 component와 상태를 가지지 않는 component
서론
앞(1,2,3 장)에서는 속성(props)을 변경하여 뷰(view)를 갱신했음 하지만 속성은 현재 컴포넌트 내부에서는 수정할 수 없음 (속성은 해당 컴포넌트 생성 시에 전달받는 값이기 때문)
그러면 사용자 입력에 따른 뷰의 상태변화는 어떻게 처리해야 할까? React component의 상태(state) 객체를 이용하면 가치있고 상호작용이 뛰어난 애플리케이션을 만들 수 있다. 상태는 React component에 data를 저장하고 data의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심 개념이다.
React 컴포넌트의 상태(state)
React의 상태는 컴포넌트의 변경 가능한 데이터 저장소이다. 독립적이면서 기능 중심인 UI와 논리의 블록이다.속성과 상태는 둘 다 뷰를 갱신하기 위해 사용할 수 있지만, 서로 다른 목적으로 사용한다.
상태를 변경하면 뷰에서 변경한 상태에 관련된 부분만 갱신된다 (작게는 하나의 HTML 요소 or 한 요소의 속성만 변경됨) 이것은 가상 DOM 덕분인데, 이는 React가 보정(reconciliation) 과정을 통해 변경할 부분을 결정하는 방식이다.
상태 객체 다루기
회사에서는 Redux를 사용하여 상태를 변경하기 때문에 상태 객체를 직접 수정하지 않음
상태 객체는 component의 멤버 변수로 this를 통해 접근할 수 있다.
render()에서 상태 데이터를 사용하려면 먼저 상태를 초기화해야 한다. 초기 상태를 설정하려면 React.Component를 사용하는 ES6 클래스의 생성자(constructor)에서 this.state를 선언한다. 반드시 super()에 속성을 전달하여 실행해야 한다. 그렇지 않으면 부모 클래스 (React.Component)의 기능을 정상적으로 사용할 수 없다.
constructor() 메서드는 React 엘리먼트가 생성되는 시점에 한 번만 호출된다. 따라서 아래와 같은 코드로 this.state의 초기화를 진행한다. 이 외의 부분에서 this.state=... 이렇게 직접 상태를 선언한다면 의도하지 않은 결과를 낳을 수 있다.
class Content extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'aimho',
boosk: [
'pro express.js',
'practical node.js',
'tutorial react'
]
}
}
}그럼 초기화가 끝난 상태는 어떻게 변경할 수 있을까? 클래스 메서드인 this.setState(data, callback)를 사용하면 상태를 변경할 수 있다. 이 메서드를 실행하면 React는 전달하는 data를 현재 상태에 병합하고 render()를 호출한다. 이후에 React가 callback 함수를 실행한다.
상태 객체와 속성
상태 객체와 속성은 모두 클래스의 멤버이며, 각각 this.state와 this.props를 말한다. 둘의 주요한 차이점은 상태객체는 변경 가능한 반면 속성은 변경이 불가능하다는 점이다. 또다른 차이점은 상태는 해당 컴포넌트에서 정의하고 속성은 부모 컴포넌트에서 전달한다는 점이다.
상태비저장 컴포넌트
상태비저장 컴포넌트(stateless component)는 상태 객체가 없으며, 컴포넌트 메서드 or 다른 React의 라이프사이클 이벤트 or 메서드를 갖지 않는다. React Hook을 사용하면 가능
상태비저장 컴포넌트는 예측할 수 있다는 이점이 있는데, 출력을 결정하는 입력이 한 가지 뿐이기 때문이다.
예측가능성은 곧 이해가 쉽고, 유지보수와 디버깅이 편리하다는 것을 의미하며, 실제로 상태를 가지지 않는 것이 React의 가장 바람직한 사례라고 볼 수 있다.
상태비저장 컴포넌트는 더 많이 사용할 수록, 상태저장 컴포넌트는 더 적게 사용할수록 좋다.
상태비저장 컴포넌트와 상태저장 컴포넌트의 비교
상태비저장 컴포넌트를 사용하면 중복을 줄일 수 있고, 더 나은 문법을 바탕으로 좀 더 간결하게 컴포넌트를 작성할 수 있다.
React 팀이 소개하는 모범 사례는 일반 컴포넌트를 사용하는 대신 상태비저장 컴포넌트를 가능한 많이 사용하는 것이다. 물론 상태를 이용해야 하는 경우도 가끔 있다. 따라서 컴포넌트 계층 위에는 UI 상태, 상호작용 그 외에 애플리케이션 로직(서버에서 데이터 불러오는 것 등)을 관리하는 상태저장 컴포넌트가 위치하게 된다.
요약
- 상태(staet) 객체는 변경할 수 있다. 속성은 변경할 수 없다.
- 컴포넌트 클래스의 생성자에서 this.state=... 을 사용하거나, createClass()를 사용하는 경우 getInitialState를 호출하여 컴포넌트의 초기 상태 객체를 설정할 수 있다.
- this.setState는 상태 객체 전체가 아니라 전달한 항목만 갱신한다.
- {}는 JSX 코드에서 변수를 출력하고 자바스크립트를 실행할 때 사용한다.
- 상태 객체는 this.state.NAME으로 접근한다.
- 상태비저장 컴포넌트는 React를 다룰 때 선호되는 방식이다.
추가 정보
상태를 저장하지 않고 undefined 값으로 두면, 반복적으로 상태의 존재 여부를 확인하는 코드를 작성하게 되거나 버그가 생길 수도 있다. (초깃값을 설정해 놓으면 불편을 피할 수 있다)
