[React] Movie-app Notes - State (2) Good Way

📒 Nomad Coder ReactJS로 영화 웹 서비스 만들기
강의노트 (2021 Updated ver.)

---

#3. State

👍 방법 = State 사용하기

React.js 내에서 데이터를 보관하며, render()을 매번 호출하지 않고 자동으로 리렌더링을 일으킬 수 있는 방법을 알아보자.

1. 기존 코드를 삭제하고 기본 구조만 남겨둔 상태를 만들자

<script type="text/babel">
  const root = document.getElementById("root")
  function App() {
    return (
      (
        <div>
          <h3>Tocal Click : 0</h3>
          <button>Click me!</button>
        </div>
      )
    )
  }
  ReactDOM.render(<App />, root);
</script>

2. React에서 제공하는 함수를 사용해 data와 function을 구현하자

React.useState()는 data와 function을 포함한 배열을 반환한다 => State의 생성
State : 데이터 저장소

이 한 줄로 기존에 Bad Way에서 썼던 수 많은 코드를 대체할 수 있게 되었다.

• data :

let count = 0;

• function :

function counterUp() {
  count += 1
}

React.js가 제공하는 useState()가 반환하는
'인덱스의 두번째 값 [1]'
=== 'setCounter'
=== 'function'으로 이벤트 생성과 함께 자동 리렌더링(UI update)까지 구현할 수 있다.

데이터가 바뀔 때마다 컴포넌트(App())을 리렌더링하고 UI 요소에서 바뀔 부분을 refresh한다.
state가 바뀌면 -> new value를 가지고 - > rendering application

3. state 값 변경하기

state의 값을 변경하는 방법은 2가지로 나뉜다.

1. 정적으로 값 변경하기

setCounter(123)
setCounter('abc')

아예 정해진 값을 modifier에 적용해버리는 방법이다.
가장 간단하지만 한 번 입력한 값을 동적으로 바꿀 수 없다.

2. 함수로 값 변경하기

위에서 구현했던 코드에서 바로 이 방법을 썼다.

 function App() {
    const [counter, setCounter] = React.useState(0);
    const onClick = () => {
      setCounter(counter + 1)
    };

• counter : 현재 state (value)
• setCounter : modifier

위는 현재 값을 기준으로 삼고 1씩 증가하는 구조이다. 하지만 현재 값은 예상치 못하게 다른 곳에서 변할 수 있다 ( -> 지금은 잘 이해가 안됨).

우리는 1씩 증가시키는 구조를 만들었지만, 
counter가 다른 곳에서 update되어 이미 다른 값이 되면 
우리가 원하는 값이 계산되지 않고 오류를 발생시킬 수 있다.

=> 그래서 좋은 방법이 아니다.

가장 확실하고 안전하게 '현재를 기준으로 삼는 방법'은 counter value을 기준으로 두지 않고, 현재 값을 표현하는 함수로 적용하는 것이다.

setCounter(current => current + 1)

modifier의 로직은 함수로도 표현이 가능하다. 첫번째 인자로 state의 현재 값을 넘겨주고(counter에 0을 넣은 것처럼 내가 지정하지 않음), current값에 1을 더해주는 로직을 만들면 기존에 썼던 방식과 같은 역할을 하지만 더 안전한 방법으로 새로운 state값을 update할 수 있다.

 function App() {
    const [counter, setCounter] = React.useState(0);
    const onClick = () => {
      setCounter(current => current + 1)
    };

Summary

State는 React에서 데이터를 보관하고 관리할 수 있다. State는 value(값), modifier(변형 함수) 두 개의 값을 배열로 가지며, modifier의 로직에 따라 value가 설정된다.
이 때, State의 값이 바뀌면 새로운 값을 가지고 렌더링이 자동적으로 일어나고 그 값이 UI에 표기된다. 그래서 State를 사용하면 저번처럼 render()을 매번 호출할 필요가 없다.