React.js가 useState로 원하는 Rerendering을 도와주는 방법

 

 

React.js의 state 사용하기

위 게시글에 이어서 작성하는 글입니다.

매번 Rerender를 해 줘야하기때문에 좋은 방법이 아니다.
Render 함수를 다시 호출해주면 새 Container 컴포넌트를 생성할 것이라고 생각하지만, 

새로 랜더링 하더라도 바뀐 부분만 새로 생성한다.

문제는 함수의 이름이 변경되는 등의 변수가 생기면 코드를 모두 수정 해 줘야한다.

 

 

1. 리스너 초기화

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

 

 

2. 데이터 담기

 

    const root = document.getElementById("root");
    function App() {
      const data = React.useState();
      console.log(data);

위와 같이 React.useState();에 data를 담은 뒤 콘솔을 찍어보면 아래와 같이 나오는데,

[undefined, f] dptj undefined 는 데이터를 f는 데이터를 바꿀때 사용하는 함수를 뜻한다.

그래서 아래와 같이 초기값을 설정 할 수도 있다.

 

      const data = React.useState(0);
      console.log(data);

 

그러면 콘솔에서는 다음과 같이 나온다.

 

 

내가 만약 배열형태의 data 첫 번째 요소를 사용하는 경우 아래와 같이 사용해도 되지만

 <h3>Total Clicks : {data[0]}</h3>

 

아래와같이 배열에서 요소들을 꺼내서 이름을 부여하여 사용할 수도 있다.

    function App() {
      const data = React.useState(0);
      const cnt = data[0];
      const modifier = data[1];
      console.log(data);

 

그리고 위 코드는 아래와 같이 깔끔하게 사용 할 수도 있다.

 

   function App() {
      const [cnt, modifier] = React.useState(0);
      console.log(data);
      return (
        <div>
          <h3>Total Clicks : {cnt}</h3>

 

3. 이벤트적용 

  <script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      let [cnt, modifier] = React.useState(0);
      const onClick = () => {
        cnt += 1;
        console.log(cnt);
      };
      return (
        <div>
          <h3>Total Clicks : {cnt}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>

위와 같이 onClicks 이벤트를 등록 해 주면 modifier가 잘 작동 한다.

 

 

4. Rerendering

  <script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      const [cnt, setCnt] = React.useState(0);
      const onClick = () => {
        setCnt(cnt + 1);
      };
      return (
        <div>
          <h3>Total Clicks : {cnt}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>

실행을 해 보면 잘 돌아간다.