2. State, useState

State

React 에서는 모든 Component에 대한 랜더링이

이 State가 변경될 때 실시되며, react에서 사용되는 변수이다.

State 의 선언

모든 State 함수가 동작하기 위해, react내 React, { useState } 가 Import 되어야 한다.

state 를 사용하기 위해서 state 변수 선언을 통해서 시작하는데

state를 정의하는 useState() 함수는 다음과 같은 정의를 가진다.

 

var [state데이터 , state 변경함수] = useState('데이터')

State 의 변경

어떤 State의 구조를 변경하기 위해서, React의 state는 변수의 재할당을 통해

변경되는 모든 데이터는 State 변경함수를 통해 변경되어야 한다.

 

변경함수(대체데이터)

가령

 

var sample [sample, sampleChange] = useState(['dataA', 'dataB']);

 

라고 정의된 state를 dataC, dataD로 변경하는 방법은

 

sample.sampleChange(['dataC'], ['dataD']); 가 될 것이다.

 

여기서 State를 배열로 선언할 경우, sample.sampleChange[1] = 'dataC' 처럼 사용할 수 없는데

State에서의 재정의는 모든 요소를 초기화하고 다시 대입하기 때문이다.

 

따라서 어떤 함수의 호출에 의한, 출력을 정의할 경우

 

var output = [...sample];

output[0] = 'dataC'

return output

 

처럼 output을 정의할 변수를 만들어 사용하는 것이 좋다.