React state란?

React state란?

 

 

 

리액트에서 state는 component의 상태를 의미한다.

component는 뒷 장에서 자세히 설명하겠다.

 

유동적인 변수를 사용할 때 화면에 그려지는 변수도 정상적으로 변경되길 원한다면 사용한다.

 

주의점은 렌더링이나, 데이터의 흐름에 사용되는 것만 state를 이용해야 한다.

 

State가 변경될 경우 Component가 재렌더링되기 때문에,

렌더링과 데이터 흐름에 관련 없는 값을 포함하면

불필요한 경우에 Component가 다시 렌더링 되어 성능을 저하시킬 수 있기 때문이다.

 

그래서 렌더링과 데이터 흐름에 관련 있는 값만 State에 포함하도록 해야 하며,

그렇지 않은 값은 Component의 인스턴스 필드로 정의하면 된다.

 

지금은 자바스크립트에서 변수를 이용하듯이, 리액트에서는 state를 이용한다고 생각하자.

 

 

 

1. state 사용하기

맨 윗줄에 아래 코드를 적자

import React, {useState} from 'react';

 

이제 useState()라는 함수를 사용할 수 있는데

useState('아무 데이터');

 

위 코드가 실행되면 길이가 2인 배열이 생성된다.

인덱스 0번에는 내가 입력한 데이터(아무 데이터)가 저장되고,

다음 인덱스에는 해당 데이터를 변경하기 위한 함수를 하나 생성해준다.

따라서 이런 식으로 이용할 수 있다.

let [글제목, 글제목변경] = useState('아무 데이터');

참고로 위 코드는 es6부터 사용 가능한 destructuring 문법이다.

그냥 편하게 쓸 수 있다는 것만 알아두자.

 

그리고 '아무 데이터' 대신에 배열, 오브젝트, 숫자 등 전부 가능하다

 

 

사용자가 보고 있는 화면에서 뭔가를 정렬하는 버튼을 누르거나, 수정해서 값이 변경되거나 하는 상황에서

state를 이용하지 않는다면, 바뀐 값들을 보기 위해 사용자는 매번 새로고침을 해야 한다.

 

이 자체로 귀찮고, 새로고침하며 내가 입력했던 값들이 없어지거나 하는 등의 상황도 발생할 수 있기 때문에,

웹앱의 형태로 사이트를 제작하고 싶다면 반드시 state를 이용해야 한다.