리액트 핵심만 훑어보자 #6 상태

 

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 

 

리액트는 상태(State)를 관리해야 한다

• 다음 포스팅에서 다루게 될 리액트의 생애주기를 공부하기 위해서는 먼저 상태에 대해서 알아야 한다.
• 상태는 리액트 컴포넌트의 변경 가능한 데이터이며, 상태가 변경되면 컴포넌트가 재렌더링된다.
• 그렇기 때문에 상태를 정의할 때는 꼭 렌더링이나 데이터 흐름에 사용되는 값만 상태에 포함시켜야 한다.  
• 상태를 무분별하게 정의한다면 애플리케이션의 성능을 저하시킬 수 있기 때문이다.
• 상태는 따로 복잡한 형태가 있는 게 아니라 하나의 자바스크립트 객체이다.

 

class LikeButton extends React.Component {
      constructor(props) {
    	  super(props);
    
       this.state = {
            liked : false
        };
    }
}

• 클래스 컴포넌트의 경우 상태는 생성자 코드 내에 정의되어 있다.
• 반면 함수 컴포넌트의 경우 useState()라는 훅을 사용해서 상태를 정의한다.

 

// 직접 수정
this.state = {
    name : "kim"
}

// setState 함수를 통해 수정
this.setState({
    name : "kim"
});

• 이렇게 정의한 상태는 일반적인 자바스크립트 변수를 다루듯 수정하면 안 된다.
• 위에서 언급했듯 상태는 컴포넌트의 렌더링과 관련 있기 때문에 마음대로 수정하게 되면 애플리케이션이 개발자가 의도한 대로 동작하지 않을 수 있다.
• 그러므로 상태를 변경하고자 할 때에는 꼭 setState()라는 함수를 사용해야 한다.

 

마치며

• 이번에 공부한 상태와 다음 포스팅에서 다룰 리액트의 생애주기는 리액트 핵심 기능인 훅과 연결되어 있으므로 꼭 숙지해두어야 한다.
• 이번에는 실습은 따로 없다.

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io