6.1.1 State란?

먼저 state에 대해서 알아보도록 하겠습니다. 일반적으로 영어 단어 state는 한글로 상태라는 뜻을 갖고 있습니다. 그렇다면 리액트에서 state는 어떤 것의 상태를 의미할까요? 리액트에서 state는 리액트 컴포넌트의 상태를 의미합니다. 하지만 상태라는 단어의 의미 그대로 정상인지 비정상인지를 나타내는 그런 종류의 상태라기 보다는, 리액트 컴포넌트의 데이터라는 의미에 더 가깝습니다. 쉽게 말하면 리액트 컴포넌트의 변경 가능한 데이터를 state라고 부른다고 이해하면 됩니다. 이 state는 사전에 미리 정해진 것이 아닌, 리액트 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용하게 됩니다.

state를 정의할 때 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 값들만을 state에 포함시켜야 한다는 것입니다. 왜냐하면 state가 변경될 경우 컴포넌트가 재렌더링 되기 때문에, 렌더링과 데이터 흐름에 관련없는 값들을 포함하게 되면 불필요한 경우에 컴포넌트가 다시 렌더링 되어 성능을 저하 시킬 수 있기 때문입니다. 그래서 렌더링과 데이터 흐름에 관련있는 값들만을 state에 포함하도록 해야하며, 그렇지 않은 값들은 컴포넌트 인스턴스의 필드로 정의하면 됩니다.

6.1.2 State의 특징

리액트의 state는 따로 복잡한 형태가 있는 것이 아니라, 그냥 하나의 자바스크립트 객체입니다. 그래서 앞으로는 state는 자바스크립트 객체이다 라고 기억하길 바랍니다. 아래 간단한 예제 코드를 보도록 하겠습니다.

class LikeButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            liked: false
        };
    }

    ...
}

이 코드는 LikeButton이라는 리액트 클래스 컴포넌트를 나타낸 것입니다. 모든 클래스 컴포넌트에는 constructor라는 이름의 함수가 존재하는데, 이것은 우리 말로 하면 생성자라는 의미를 갖고 있으며, 클래스가 생성될 때 실행되는 함수라고 생각하면 됩니다. 이 생성자 코드를 보면, this.state라는 부분이 나오는데, 이 부분이 바로 현재 컴포넌트의 state를 정의하는 부분입니다. 클래스 컴포넌트에서는 state를 생성자에서 정의하게 됩니다. 그리고 함수 컴포넌트에서는 state를 useState()라는 Hook을 사용해서 정의하게 되는데, 이부분은 뒷장에 나올 Hooks에서 자세히 다루도록 하겠습니다.

이렇게 정의된 state는 정의된 이후에 일반적인 자바스크립트 변수를 다루듯이 직접적으로 수정할 수 없습니다. 엄밀히 말하면 수정이 가능하기는 하지만, 그렇게 해서는 안됩니다. 아래에서 예시 코드를 보도록 하겠습니다.

// state를 직접 수정 (잘못된 사용법)
this.state = {
    name: 'Inje'
};

// setState 함수를 통한 수정 (정상적인 사용법)
this.setState({
    name: 'Inje'
});

위 코드에서 첫 번째 방법은 state를 직접 수정하는 방법이고, 두 번째는 setState()함수를 통해 수정하는 방법입니다. state를 직접 수정할 수는 있지만 그렇게 하면 안되기 때문에, 그냥 애초에 state는 직접적인 변경이 불가능하다고 생각하는 것이 좋습니다. 또한 앞에서 말씀드린 것처럼 리액트에서는 state가 컴포넌트의 렌더링과 관련이 있기 때문에 맘대로 수정하게 되면 개발자가 의도한 대로 작동하지 않을 가능성이 있습니다. 그래서 state를 변경하고자 할 때는 꼭 setState()라는 함수를 사용해야만 합니다.