[React] state

state에 대한 간단한 이해

state는 데이터가 저장되는 곳이다. 

예를 들어 counter프로그램을 만들때 바닐라 js는 counter+=1을 하고 그것을 UI에 띄었다.

이걸 리액트에서는 state로 구현할 수 있다.

리액트의 좋은 점은 바뀐부분만 업데이트 된다는 것인데 만약 바닐라js의 경우 노드 정보가 바뀔 때마다

노드트리를 처음부터 다시 생성하지만 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업데이트가 끝나면 일괄로 합쳐서 실제 돔에 던져준다고 한다!

 

 

https://nomadcoders.co/react-for-beginners/lectures/3265

All Courses – 노마드 코더 Nomad Coders

가장 popular 댓글의 상단에 있는 분의 글을 참고했다.

 

변수를 컴포넌트에 넣으려면 어떻게 해야할까?

바닐라 js에서는 span.innerText ~ 이런식으로 했는데 js 문법이 필요하면

그냥 중괄호만 열어주고 변수 이름을 담아주면 된다. 

 

버튼이 클릭될때마다 counter를 올려주려면 어떻게 해야할까?

우선 counter를 1씩 증가시키는 countUp 함수를 만들어준다.

그다음에 button에 onClick props를 추가시켜서 클릭하면 countUp 함수가 호출되게 한다.

 

onClick={counter} 가 js의 addEventListener와 비슷하다. 

하지만 이 코드의 문제점은 counter가 증가되는걸 UI에 랜더링하고 있지 않다.

그러기 위해서는 Container를 re-랜더링 해야한다. 

 

countUp 함수에 Container를 render 하면 counter가 올라가는게 반영될 것 이다.

 

앞서 말했듯이 이렇게 리액트를 통해 카운터를 구현하면 counter가 올라가는 부분만 바꿔주고

나머지 버튼이나 Total clicks 같은 텍스트는 전혀 바뀌지 않는다. 오직 바뀐부분만 업데이트 한다.

그래서 나중에 여러가지를 리랜더링한다고 하더라도 전부 다 새로 생성하진 않을 것이다. 

 

 

useState

 

하지만 이런식으로 리랜더링 하는 것은 그리 좋은 방법은 아니다. 

우선 counter가 0인 시점에 최초로 랜더링하고 counter 값이 증가할때 리랜더링을 해야한다.

이럴 때 사용하는 것이 useState이다! 이걸 사용하면 아까 위에서처럼 무지성으로 계속 리랜더링 코드를 써줄

필요가 없다!

 

useState는 두개의 원소로 이뤄진 배열을 먼저 만들어줬는데 메커니즘은 아래 예시와 같다.

우선 food 배열을 만들어주고 각각의 인덱스에 접근할 수 있도록 myFirst,mySecond를 원소로 해서

배열을 또 만들어준다. myFirst을 console.log하면 토마토가 나온다!

이건 myFirst=food[0]과 같다. 

이렇게 food[0]하면 복잡하니까 myFirst로 대체해주는 이 메커니즘을 useState에 적용한다.

 

 

리랜더링은 setCounter라는 modifier 함수를 가지고 리랜더링을 해준다. 

 

const를 바꿔주려 할 때 발생한 read-only 에러 

 

우선 setCounter함수를 modifier라는 이름을 가진 함수로 바꿨다. 이러고 빌드해보면 read-only 에러가 뜬다.

왜냐면 counter를 const로 선언해줬는데 이걸 바꾸려고 하기 때문이다. 그래서 let으로 useState 배열을 바꾸거나

그냥 counter+=1을 안하면 된다. (실제 저 코드에선 1만큼 더하는게 필요하지도 않음)

하지만 글들을 읽어보니 let으로 바꾸는건 그닥 추천하지 않았다.

 

아무튼 이렇게 useState를 통해 ReactDOM을 통해 렌더하지 않아도 바뀐 부분만 상태를 업데이트 시켜서

리랜더링 시킬 수 있다!

 

이제 카운터를 1씩 올리고 싶으면

 

setCounter(counter+1)을 하면 된다!

초기값 0이 counter에 들어갔다가 setCounter 함수를 통해 1이 더해지고 그게 counter에 저장된다 이게 버튼 눌릴 때 마다 계속 반복된다. 

 

useState를 통해 counter 값이 바뀌면 컴포넌트 전체가 새로 생성하게 된다. 

즉 state가 바뀌면 리랜더링 된다!

 

 

state function

counter라는 현재 state를 통해 setCounter를 통해 state가 변경된다.

 

하지만 이건 좋은 방법이 아니다. counter가 다른 곳에서 업데이트 된다면??? 

끔찍하다. 

state를 바꾸는 방법이 2가지 있다.

 

1.setCounter를 통해 원하는 값을 넣어준다. (숫자,문자 상관 없음)

2. 이전 값을 이용해서 현재값을 계산해주는 것

이것이 아까 본 setCounter(counter+1); 이다.

이거보다 더 좋은 방법이 있는데 setCounter 안에 함수를 넣어주는 것이다!

함수의 첫번째 인자는 현재값을 넣어준다.

 

prev 받아오는거랑 똑같다! 

즉 현재 값을 바탕으로 다음 값을 계산해주려고 할 때 setCounter 안에 함수를 넣어주면 된다!

 

여기서 setState를 보면 된다.

https://we1cometomeanings.tistory.com/343

[React]조건부 렌더링과 setState