< React > State

State는 React 컴포넌트 내부의 속성값을 스스로 업데이트 할 수 있는 기능이다. 특정 로직에 따라서 클래스 스스로 변수를 관리할 수 있도록 해 준다.

 

내가 정리한 State와 Props 차이는 다음과 같다. ( 주관적인 생각이다. )

 

- props : 컴포넌트 간 계층적인 구조, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달, 그러므로 분리된 컴포넌트( 파일 ) 간 데이터를 전달 할 경우 사용할 수 있음. ( Context 개념과 밀접함 ). 즉 개별 컴포넌트 간 전달 할 특정 데이터 변수 집합

 

- state : 컴포넌트 스스로 조작 가능한, 내부의 변수 집합. 클래스 내부의 변수들과 의미가 비슷함. setter도 존재하여 필요한 로직에 따라서 변수를 업데이트 할 수 있음.

 

내가 해당 변수를 컴포넌트 내에서 사용하고 싶을 땐 state로 관리를 하고, 다른 컴포넌트로 전달해 주고자 할 때는 props를 쓰면 되겠다.

 

우선 코드를 확인해 보면 다음과 같다.

 

이전의 코드에 새로운 컴포넌트인 Counter.js를 선언하여 state를 가지도록 했다. button 태그를 생성하여, onClick 이벤트 발생 시, setState 함수로 setter 기능, 즉 state를 매번 1 씩 더하도록 상태 갱신을 하였다.

 

setState는 인자를 여러 개 받는데, 첫 인자는 state 관리이고, 두 번째 인자는 해당 변수가 갱신되고 난 뒤 추가적인 로직을 구현해 줄 수 있도록 해준다. 그래서 arrow function을 받아서 콘솔에 해당 변수가 갱신이 되었는지 확인해 주도록 한다.

 

constructor, 생성자를 통해서 state를 관리했지만 굳이 그렇게 하지 않고 state = { ... } 로 초깃값을 관리할 수 있다.

 

요즘에는 Functional Component, Hooks 사용을 권장하고 있다. 그래서 React 역시 Functional Component에서도 State 관리 기능을 구현 해 주었다. 코드는 다음과 같다.

 

Say.js를 따로 선언했다. 이번에는 함수형 컴포넌트로 구현한 것이다. 4째 문단을 확인해 보자.

 

Hooks가 지원해주는 useState 항목이다. 이를 통해 state 기능을 제공해준다. useState 함수 인자는 상태의 초깃값을 넣어준다. 우리가 이전에 구현한 state = { ... } 부분과 같다. 인자의 값 형태는 자유이다.

 

useState를 호출하면 배열을 반환하는데, 1째 원소는 현재 상태, 2째 원소는 상태를 바꾸어주는 setter 함수를 가져온다. 2째 원소를 통해 해당 변수를 관리한다. 

 

사족으로 4째 문단과 같은 코드 구조 방식을 배열 비구조화 할당이라고 한다. ES6이 제공해주는 객체 비구조화 할당과 비슷하니 알아두자.

 

정리하자면, state는 클래스 안 변수처럼 사용하되, 갱신할 때는 반드시 setState, 혹은 useState 안 setter 함수를 통해서만 갱신하도록 하자.