[React State] - 사용법과 사용하는 이유

'State'에 대한 설명을 드리기에 앞서 이 글에서
자주 언급하게 될 '컴포넌트'에 대해 간략히 설명드리자면
"UI의 작고 재사용 가능한 구성 요소"를 뜻하며 재사용이 가능한 구성 요소라는 것은
"여러 곳에서 반복적으로 사용이 가능한 독립적인 UI 블록"을 뜻합니다."

(자세한 내용은 아래에 첨부한 블로그를 참고하시면 좋을 것 같습니다!)

컴포넌트 설명 블로그

1. State란 무엇일까?

리액트에서 State는 컴포넌트의 상태를 의미합니다.
정상 또는 비정상과 같은 상태를 나타내는 것 보다는
"리액트 컴포넌트의 데이터"라는 의미가 더 적절합니다.

• 리액트 컴포넌트의 데이터 중 '동적 데이터'를 관리하는 데에 사용되며
  '동적 데이터'란 컴포넌트의 렌더링 결과를 동적으로
  변경할 수 있는 데이터를 의미합니다.


• 한 가지 예시를 들자면 JS에서는 변수를 사용합니다.
  반면에 리액트에서는 상태(state)를 JS에서의 변수처럼
  사용한다고 생각하면 이해에 도움이 됩니다.


• state를 정의할 때 중요한 점은 상태 데이터가 '렌더링' 과 '데이터의 흐름' 에
  영향을 미치는 것만 사용해야 한다는 점인데 그 이유는
  state가 변경될 경우 컴포넌트가 재렌더링 되기 때문에
  랜더링과 데이터 흐름과는 무관한 값을 포함하면 불필요한
  컴포넌트가 다시 렌더링 되어 성능을 저하시킬 수 있기 때문입니다.


• 따라서 '렌더링' 과 '데이터의 흐름'에 영향을 주는 데이터만 사용할 시
  리액트 컴포넌트가 효율적으로 렌더링을 관리하고 상태 변경에 따른
  UI 업데이트가 적절히 이루어지도록 보장합니다.


• 마지막으로 'state'는 별도의 복잡한 형태가 있는 것이 아닌
  자바스크립트(JS)의 다양한 객체 중 하나입니다.

2. 예제 코드를 활용한 State 사용 방법

아래에서 설명드릴 코드는 버튼을 클릭할 때 마다
cnt 값이 증가하는 간단한 카운터 코드입니다.

1. 파일의 최상단에 'useState'를 임포트 해줍니다.
   


2. 'IncreaseCnt' 함수 내에서 'useState'를 선업합니다.
   (cnt는 현재 값, setCnt는 cnt를 업데이트 하는 함수를 의미합니다.)
   
   • let이 아닌 const로 선언하는 이유 :
     변수의 재할당을 방지하고 setState를 사용한 변수 변경만
     허락하기 위해 let이 아닌 const로 선업합니다.


3. 버튼을 누르면 아래와 같이 정상적으로
   숫자가 증가하는 것을 확인할 수 있습니다.
   

3. React에서 state를 사용하는 이유

3-1. state를 사용하지 않는 경우 :

• 지역변수는 렌더링 간에 값이 유지되지 않으며 state를 사용하지 않고
  리액트에서 변수를 변화시키고자 한다면 UI에는 아무런 변화가 나타나지 않습니다.


• 추가로 지역변수는 랜더링을 발생시키지 않아서 즉 리렌더링이
  발생하지 않아서 UI 상에 변화가 나타나지 않습니다.

3-2. state를 사용하는 경우 :

• state 변수 : 렌더링 사이에 데이터를 유지하고 저장한 값을 갖습니다.


• setState 함수 :
  변수를 업데이트하고 리액트가 컴포넌트를 다시 렌더링 하도록 촉발합니다.


• 위 과정을 거치면 리렌더링이 발생한 이후에도
  index 안의 값을 기억하여 UI에 띄워주게 됩니다.

state 설명 참고 블로그
state 사용 방법 참고 블로그
state 사용 이유 참고 블로그