State?

• 현재 가지고 있는 형태나 모양을 정의 변환할 수 있는 동적인 값
• State는 컴포넌트의 현재 상태를 보관하는 변수이다.

→ State의 값에 따라 렌더링 되는 UI가 결정된다.

• 하나의 컴포넌트에 여러개의 State를 만드는 것도 가능하다.

State 생성 방법

• useState라는 내장함수 사용하여 불러오기(import)
• useState 함수 호출

useState 함수

• 인수로 state의 초기 값을 받아서 두 개의 요소를 담은 배열을 반환한다.
• 첫 번째 요소는 state의 현재 값, 두 번째 요소는 state 상태를 변경 시키는 상태 변화 함수이다.

State 사용 방법

• return문에서 상태를 변화 시키고자 하는 부분에 상태 변화 함수인 setState 함수를 호출한다.
• 인수로는 변경하고자 하는 상태의 값을 입력한다.

→ State의 값이 변경될 때만 컴포넌트가 리렌더링 된다.

리렌더링

• 컴포넌트 역할을 하고 있는 함수를 다시 호출하고, 새롭게 반환한 값을 화면에 다시 렌더링 한다는 의미이다.

→ 함수 컴포넌트가 최초로 렌더링될 때는 state의 값 초기값이 0이였을 때, 버튼을 클릭해서 값이 업데이트된 리턴문이 반환한다.

→ 그리고 업데이트된 state의 값이 화면에 즉각적으로 반영이 된다.