State
React 에서 'state' 란
컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미하며, 해당 컴포넌트가 UI 에 보여줄 정보를 결정할 때 사용할 수 있는 상태값을 의미한다. state 는 컴포넌트 내에서 정의하고 사용하며 얼마든지 변경할 수 있다. 즉 'state' 는 컴포넌트가 마운트 될 때 기본값 을 갖게 되고, 이 'state' 를 활용해 데이터를 변화시켜줄 수 있다.
state 선언 
state를 사용하기 위해 'useState' 함수를 import 한 후에 사용해야 한다. useState 함수는 'Hook' 의 일종으로 내장되어 있는 react로 부터 가져올 수 있다.
import 한 useState Hook은 사용 규칙에 따라 컴포넌트 선언문 내에서 최상위 블록 내에서 사용 하면 된다. (return 위)
useState Hook 을 사용할 때는 useState Hook으로 부터 반환 되는 값을 '구조 분해 할당' 을 통해 각각의 변수에 담아서 사용 한다.
[state, setState]
useState Hook 의 호출 결과로 반환되는 배열의 요소
- 첫 번째 요소 (state) 는 우리가 동적으로 관리하고자 하는 상태값이다. 해당 상태의 초기값은 useState hook 을 호출 할때 인자로(defaultValue) 로 넘겨준다.
- 두 번째 요소 (setState function) 는 첫 번째 요소인 상태값을 업데이트 하는 함수 이다. state를 초기값에서 다른 값으로 변경하고 싶다면 setState를 통해서 변경해 주면 된다.
- (첫 번째 요소와 두번째 요소의 이름은 자유롭게 사용 가능하다 )
[state, setState] - 사용
-
h1 태그등 에 변경하고자 하는 것이 배경 색상일 때, 인라인 스타일을 적용하고 backgroundColor를 적용한다
-
backgroundColor의 value 로서 정적인 값이 들어가면, 배경색상을 동적으로 활용할 수 없게 된다. 따라서 'backgroundColor: color' 와 같이 미리 선언한 state 값을 넣어 준다.
-
처음 화면이 렌더링 될 때 useState hook 의 초기값인 'red' 에 따라 h1 태그의 배경색은 빨간색으로 그려진다.
-
state 초기값의 따라서만 색상이 변하기때문에 state에 초기값을 직접 수정해줘야 한다 따라서 useState hook 의 반환 값 중 두 번째 요소였던 setState function 을 통해 해결 할 수 있다.
-
h1 태그 하위에 button 태그를 추가 해주고 사용자가 생성된 버튼을 클릭시 h1 태그의 색상이 변경이 되도록 버튼에서 발생하는 이벤트는 클릭이므로 onClick 이벤트 핸들러를 넣어주고, 해당 이벤트가 발생할 때 마다 실행될 로직을 만들어 주어야 한다.
여기서 실행시키고자 하는 바로 color 값을 'blue' 로 바꿔 주는 것이므로 setColor 함수를 실행시키고 인자로 바꾸고자 하는 값인 'blue' 를 넘겨준다. 그러면 '색상 바꾸기 ' 라는 버튼을 사용자가 클릭하면 h1 의 배경색은 빨간색에서 파란색으로 바뀌게 된다. -
setColor 를 통해 color 의 값을 변경해야만 값의 어데이트와 리렌더링의 효과를 볼 수 있다.
정리
- state 란 해당 컴포넌트가 UI 에 보여줄 정보를 결정할 때 사용 할 수 있는 상태값.
- useState hook 을 호출하고, 구조 분해 할당을 통해 반환된 값을 사용할 수 있다.
- 첫 번째 요소인 state 를 통해 동적으로 관리하고자 하는 값을 할당할 수 있다.
- 두 번째 요소인 setSTate function 을 통해 state 를 업데이트 할 수 있다.
