1. Variable, State, Props

일단용어를 명확히 해야될거 같아서 용어 정리부터 하고 가야될거같습니다.

• (일반)변수(var, const, let) : 불변성에 구애받지 않는 변수로써 언제든 바뀔수 있고 component마다 rerendering 될때마다 초기화가됩니다. 변수는 언제든 변경이 될수있고 변수는 변경이 된다고 해도 rerendering이 되지는 않습니다.
• State(상태) : state는 컴포넌트 내부에서 바뀔수 있는값입니다. 그렇지만 불변성에 구애받기 때문에 그냥 막 바뀔수는 없고 특정 함수로써 바꾸어야됩니다. state를 변경하면 해당 component와 하위 component 모두는 rerendering이 이루어지며 이루어진다고 하더라도 State의 초기화는 이루어지지 않습니다.
• Props(프롭스) : component 설명할때 자세히 설명되어있으니 한번 다시 보는걸 추천드립니다. props는 상위 컴포넌트에서 하위 컴포넌트로 내려주는 data로써 props가 바뀐다면 props를 받은 해당 component는 rerendering이 이뤄지게 됩니다. props가 정의된 component는 rerendering이 이루어지지 않고 rerendering이 된다면 일반변수는 다시 초기화 되기때문에 보통 스테이트와 같은 불변성의 변수로 내려주게 됩니다.

2. Class형 State

2-1. State 선언법

constructor(props){} 함수 내부에 this.state의 객체(Object)로써 선언이 가능합니다. rendering 내부에서 불러내고 싶다면 this.state 객체를 소환해서 가능하고
보통은 비구조화 할당을 이용하여 binding 시킨후 사용이 가능합니다.
constructor 함수내에는 super(props);로 props를 설정해줘야됩니다.
constructor를 사용하지 않을때는 this를 사용하지 않고 그냥 state로 객체로 입력하면됩니다.

2-2. State 변경을 원할때

this.setState({})로서만 변경이 불가능하고 그냥 변수 변경은 불가능합니다.
중괄호({})안에 spread syntax를 사용하지 않아도 원하는 state만 넣으면 자동으로 원하는 state만 변경이 가능하고 다른 state는 그대로 남아있습니다.

setState를 사용하는것은 비동기로 업데이트 되기때문에 두번 호출하더라도 한번만 업데이트됩니다.
두번 업데이트 하고싶다면 함수를 사용해서 객체로 리턴합니다. 이후에 callback으로 특정 작업을 시행하고 싶다면 setState의 두번째 인자로 콜백함수를 이용하여 시행하도록 할수 있습니다.

3. 함수형 State

3-1. State 선언법 및 변경

리액트 16.8 이전 버전에서는 함수형에서 state를 사용할수 없었습니다. Hooks 이후에는 useState를 이용하여 state를 선언할수 있게 되었습니다.
Hooks는 나중에 더 자세히 설명하기 때문에 useState만 이용하고 나중에 추가적인 hooks를 설명하도록 하겠습니다.
useState를 사용하면 배열 비구조화 할당을 이용하여 0번째는 State 명이 1번째 index는 변경함수가 지정되게 됩니다.
이도 마찬가지로 지정 변경함수를 이용하여 변경이 가능하고 보통 이름을 'set변수명'으로 변경함수명을 지정합니다.

객체형과는 다르게 state명을 다르게 설정해줘야됩니다. 설정할때마다 useState로 지정해줘야됩니다.