화면에 보여줄 컴포넌트의 UI 정보
useState
를 사용해야 리로드해서 UI를 다시 그려줌.function component 사용법
state를 설정할 때는useState
함수를 import한 후 사용해야한다.
useState
함수는 function 과 return 사이에서 사용한다.const [color, setColor] = useState('red');
- 초기값 ('red')를 인자로 넣어서 호출하면 배열을 반환한다
- 배열의 첫 번째 요소는 상태값이 저장되는 변수이고 /
배열의 두 번째 요소는 상태값을 갱신하는 변수이다.
state는 데이터가 바뀔 때마다 컴포넌트 안의 요소가 그 상태값을 반영하여 화면에 나타내기 위해 상태값을 설정한다.
state
const [color, setColor] = useState('red');
<h1 style={{ color:color }}>Function Component | State</h1>
JSX요소에 인라인 스타일을 적용하고 글자색을 useState의 상태값에 담은 red색상 값을 적용하였다.
setState
<button onClick={() => setColor('blue')}>Click</button>
버튼을 누르는 이벤트가 일어나면 red였던 속성값을 blue로 바꿔준다.
이처럼 화면에 보여줄 정보가 변화해야 하는 변수나 중요한 데이터는 state를 사용하면 제어하기 편하고 데이터가 바뀔 때마다 효율적으로 화면에 보여줄 수 있다.