State

state

화면에 보여줄 컴포넌트의 UI 정보

---

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
• 얼마든지 데이터가 변경될 수 있다.
• 변할 데이터를 저장 / 중요한 데이터
• useState를 사용해야 리로드해서 UI를 다시 그려줌.

function component | state

function component 사용법

state를 설정할 때는 useState 함수를 import한 후 사용해야한다.

• useState함수는 function 과 return 사이에서 사용한다.

const [color, setColor] = useState('red');

• 초기값 ('red')를 인자로 넣어서 호출하면 배열을 반환한다
• 배열의 첫 번째 요소는 상태값이 저장되는 변수이고 /
  배열의 두 번째 요소는 상태값을 갱신하는 변수이다.

state는 데이터가 바뀔 때마다 컴포넌트 안의 요소가 그 상태값을 반영하여 화면에 나타내기 위해 상태값을 설정한다.

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를 사용하면 제어하기 편하고 데이터가 바뀔 때마다 효율적으로 화면에 보여줄 수 있다.