React : setState

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

React App 내에서 data를 보관하고 자동으로 render하기
지금까지는 data를 update할 때마다 반복적으로 render하면서 UIupdate를 했다.
이번에는 초기data를 가진 시점에 최초render를 한 후, 버튼을 click했을 때 새로운 정보(data)를 가진 component를 자동으로 Re-render해본다.

useState

useState
동적인 값인 state를 컴포넌트에서 관리할 수 있는 React Hook

App이라는 component안에 data라는 변수를 생성하는데 이때 React.useState()를 사용해본다.

    const root = document.getElementById("root");
    const App = () => {
      const data = React.useState();
      console.log(data);
      return (
        <div>
          <h3>Total clicks: 0</h3>
          <button>Click me</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);

콘솔에 data를 찍어보면 undefined값과 함수를 지닌 Array가 하나 등장하는데 이것이 바로 React.useState()로 얻어지는 것들이다.undefined로 할당된 것이 data이고, f는 data를 바꿀 때 사용되는 함수(function)이다.

//초기값을 0으로 설정 
React.useState(0);

초기값을 설정하게 되면 이전 img에서 undefined로 할당되었던 것이 0으로 변해있는 것을 확인 할 수 있다.

    const root = document.getElementById("root");
    const App = () => {
      const data = React.useState(666);
      console.log(data);
      return (
        <div>
          <h3>Total clicks: {data[0]}</h3>
          <button>Click me</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);

초기값을 666으로 선언하고, App내에서 data[0]을 호출하면 아래와 같은 결과가 나온다.

잘 작동하지만 지속적으로 필요한 data를 지정해서 꺼내줘야한다는 점이 불편하다. 다른 방법 없을까?

배열에서 요소를 꺼내 이름 부여하기

javascript의 문법을 이용해서 배열을 만듬과 동시에 이름을 부여해본다.

//food라는 배열을 만들고
const food = ['tomato', 'potato'];
//배열의 첫번쨰 요소에는 myFav, 두번째 요소에는 mySecondFav라는 이름을 할당해준다.
const [myFav, mySecondFav] = food;

콘솔에 할당된 이름을 찍어보면 각이름에 맞는 값이 출력된다.

const food = ['tomato', 'potato'];
const myFav = food[0];
const mySecondFav = food[1];

이것과 완전히 같은 결과를 출력하지만 훨씬 더 직관적이고 간결하다.

복습

//기본 javascript에서 이렇게 작성했다면,
const x = [1,2,3];
const a = x[0];
const b = x[1];
const c = x[2];

//이번에는 단 두줄로 끝낼 수 있다.
const x = [1,2,3];
const [a,b,c] = x;

setState

그럼 이제 React.useState()의 활용을 해보자.

    const root = document.getElementById("root");
    let counter = 0;
    function onClick() {
      counter = counter + 1;
      ReactDOM.render(<App />, root);
    }
    const App = () => (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={onClick}>Click me</button>
      </div>
    );
    ReactDOM.render(<App />, root);

기존의 방식은 counter와 onClick를 App 밖에서 각각 선언하고 dataUpdate가 이뤄지면 ReactDOM을 직접 Re-render했다. 정상적으로 작동하지만 dataUpdate가 될 때마다 Re-render를 해야하므로 비효율 적이라고 할 수 있다.

    const root = document.getElementById("root");
    const App = () => {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);

조금 더 간결한 방식은 App안에 React.useState()를 활용해 data와 함수를 담은 Array를 받고, Array의 각 요소에 이름을 할당해준다.
여기서 setCounter가 바로 핵심인데 data(state)가 upDate될 때마다 자동으로 Re-render해주는 함수이다. 해당 함수의 이름은 일반적으로 set+data(state) 형식으로 이루어 지는 것 같다.

//예시
const [counter, setCounter] = React.useState(0);
const [address, setAddress] = React.useState(0);
const [name, setName] = React.useState(0);

React.useState(0)에서 0을 빼면 어떻게 될까?

초기값은 출력되지 않고 click했을 때는 NaN이 보여진다.

왜 NaN을 보여주는 걸까?
React.useState(0)의 ()에는 state의 초기값이 담겨야한다. 만약 초기값을 입력하지 않는다면 값은 undefined가 되며, 이 경우 counter는 Number이므로 초기값이 없기 때문에 NaN(Not A Number)을 보여주는 것 같다.