컴포넌트의 상태 관리와 사이드 이펙트

</>·2021년 10월 23일

React

Get to Know React

목록 보기

3/8

목표

컴포넌트의 상태와 관리에 대해 알아본다.

컴포넌트의 사이드 이펙트에 대해 알아본다.

1. 컴포넌트의 상태 관리

1-1. 엘리먼트? 컴포넌트?

엘리먼트(Element)는 화면에 표시할 내용의 가장 작은 단위이다.
컴포넌트(Component)는 엘리먼트들의 집합이다.
React 공식 문서에서 엘리먼트는 리액트 앱의 가장 작은 단위이며 컴포넌트의 구성 요소라고 표현하고 있다.

1-2. 컴포넌트의 상태 관리(not use hooks)

  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        let keyword = "";

        const onChange = (e) => {
          keyword = e.target.value;
        };

        return (
          <>
            <input onChange={onChange} />
            <button>search</button>
            <p>searching... {keyword}</p>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>
  </body>

위 코드에서 onChange를 통해 값이 입력될 때마다 p태그의 내용을 바꾸는 코드이다. 하지만, input에 값을 넣어도 p 엘리먼트에 있는 keyword가 바뀌지 않는다. 이는 render를 하지 않기 때문이다.

notUseHooks

1-3. 컴포넌트의 상태 관리(use hooks)

  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        // let keyword;
        const [keyword, setKeyword] = React.useState("");

        const onChange = (e) => {
          // keyword = e.target.value;
          setKeyword(e.target.value);
        };

        return (
          <>
            <input onChange={onChange} />
            <button>search</button>
            <p>searching... {keyword}</p>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>
  </body>

이번엔 이전의 코드를 훅(useState)을 이용해서 상태를 변화시켰다. input에 값을 넣었을 때 p 엘리먼트에 있는 keyword가 바뀐것을 볼 수 있다. 이는 훅이 자동으로 렌더링 해주는 것을 알 수 있다.

useState

useState

useState는 클래스 컴포넌트의 this.state의 기능을 한다.

일반적으로 일반 변수는 함수가 끝날 때 사라지지만 state 변수는 React에 의해 제거 되지 않는다.

useState의 인자로 초기값을 넘겨준다. 숫자, 문자뿐만 아니라 객체까지 초기값으로 설정할 수 있다.

useState가 반환하는 값은 state 변수와 해당 state 변수를 갱신 할 수 있는 함수 두 가지 쌍을 반환한다.

    const keywordState = React.useState("initialValue");
    console.log(keywordState[0]);
    console.log(keywordState[1]);

위의 코드를 실행해 보면 다음과 같은 결과가 나오는데, state 변수에 초기값으로 설정했던 initialValue라는 문자열와 state 변수를 갱신할 수 있는 dispatchAction함수가 출력된 것을 볼 수 있다.

useState

위의 코드는 useState 함수의 리턴 값을 통째로 가져와 배열의 인덱스로 값들을 불러 왔다. 하지만, 보통 이렇게 쓰지 않는다.


// 1. 구조 분해 할당 X
    const keywordState = React.useState("initialValue");
    const keyword = keywordState[0];
    const setKeyword = keywordState[1];

// 2. 구조 분해 할당 O
    const [keyword, setKeyword] = React.useState("");

자바스크립트는 구조 분해 할당이란 것을 제공하는데 개별 변수로 한번에 담을 수 있다. 이는 코드가 더 깔끔해보이는 효과를 준다.

구조 분해 할당

자바스크립트 문법으로 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

자세한 내용은 Mozilla - 구조 분해 할당에서 확인할 수 있다.

1-4. 여러 개의 컴포넌트의 상태 관리(use hooks)

🤔 의문

여러 개의 변수를 useState를 통해 관리하고 싶을 땐 어떻게 해야 할까?

useState는 state별로 독립적으로 관리하기 때문에 2개 이상의 변수를 저장한다면 useState를 그만큼 호출해주면 된다.

  <body>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        const [keyword, setKeyword] = React.useState("");
        const [typing, setTyping] = React.useState(false);
        const [result, setResult] = React.useState("");

        const onChange = (e) => {
          setKeyword(e.target.value);
          setTyping(true);
        };

        const onClick = () => {
          setTyping(false);
          setResult(`find search result of ${keyword}`);
        };

        const onKeyPress = (event) => {
          if (event.key === "Enter" && event.keyCode === 0) {
            onClick();
          }
        };

        return (
          <>
            <input onChange={onChange} onKeyPress={onKeyPress} />
            <button onClick={onClick}>search</button>
            <p>{typing ? `searching... ${keyword}` : result}</p>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>
  </body>

total

keyword를 state 변수로 관리하는 것처럼 typing, result도 state 변수로 독립적으로 관리할 수 있다.
onChange 함수에서는 keyword와 typing state 변수를 바꾸고 onClick 함수에서는 typing과 result state 변수를 바꾼다.
onKeyPress 함수는 event 객체의 key 값이 Enter이고 keyCode 값이 0 즉, 엔터를 치면 검색이 되도록 하는 역할을 한다.

[참고] window 객체의 localStorage

localStorage

localStorage를 사용하면 Document의 Storage 객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다.

저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터 즉, 서버 단에 데이터를 저장하는 것이 낭비라고 판단되면 사용하는 것이 좋다.

    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        const [keyword, setKeyword] = React.useState(
          window.localStorage.getItem("keyword")
        );
        const [typing, setTyping] = React.useState(false);
        const [result, setResult] = React.useState("");

        const onChange = (e) => {
          window.localStorage.setItem("keyword", e.target.value);
          setKeyword(e.target.value);
          setTyping(true);
        };

        // 생략

        return (
          <>
            <input
              onChange={onChange}
              onKeyPress={onKeyPress}
              value={keyword}
            />
            <button onClick={onClick}>search</button>
            <p>{typing ? `searching... ${keyword}` : result}</p>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>

위 코드는 keyword state 변수의 값이 바뀔 때마다 localStorage에 저장한다.
setItem 함수를 통해 localStorage에 저장하는데 첫 번째 인자는 key값, 두 번째 인자는 key에 해당하는 value 값을 넣어주면 된다.
setItem을 통해 저장된 키:쌍은 getItem을 통해 가져올 수 있다. 인자에 key 값을 넣어주면 value 값을 가져올 수 있다.
localStorage는 개발자 도구 > Application > LocalStorage 에서 확인할 수 있다.

    // initialState
    const [keyword, setKeyword] = React.useState(
      window.localStorage.getItem("keyword")
    );

💡 주의

useState를 선언하는 부분에서 브라우저 내에 localStorage를 읽고 쓰는(I/O) 작업은 언제든 딜레이가 발생할 수 있기 때문에 초기값을 불러오지 못하는 문제가 발생할 수 있다.

그렇다면 딜레이 문제를 방지하려면 어떻게 해야할까?

    // lazy initialState
    const [keyword, setKeyword] = React.useState(() => {
       return window.localStorage.getItem("keyword");
    });

위 코드를 보면 useState에 직접 변수를 인자로 넘겨주지 않고 화살표 함수를 인자로 넘겨 주었다.
이렇게 되면 초기값을 읽어 오는데 시간이 좀 걸리더라도 함수가 결과 값을 반환하면 초기 값을 불러올 수 있다.
이렇게 변수 대신 함수를 넘겨 초기화 작업을 지연시킬 수 있는데, 이를 지연 초기화(lazy initialization)라고 한다.

지연 초기화(lazy initialization)

지연 초기화는 오직 state가 처음 만들어 질 때만 실행된다. 이 후에 다시 리렌더링이 된다면, 이 함수의 실행은 무시된다.

React 공식 문서에서는 초기 state가 고비용 계산의 결과라면 함수를 쓰는 것을 권장한다.

🤔 의문

그렇다면 모든 초기 값들을 지연 초기화(lazy initialization)으로 처리하면 되지 않을까?

비록, 함수가 지연 초기화로 인해 한 번만 호출되지만, 함수를 만드는 비용이 보통 변수를 생성하거나 단순히 값을 넘기는 비용보다는 크다. 따라서, 모든 초기 값들을 지연 초기화로 처리하는 것은 과한 최적화의 예이다.
localStroge, map, filter 등과 같이 고비용 계산이 들어가는 것은 지연 초기화로 처리하는 것이 좋다.

2. 컴포넌트의 사이드 이펙트

2-1. React에서의 사이드 이펙트(Side Effect)란?

사이드 이펙트란 사전적 의미로 원래의 목적과 다르게 다른 효과가 발생하는 것을 말한다.
리액트에서의 사이드 이펙트란 변경이나 효과가 일어날 때 다른 효과가 발생할 수 있도록 설정할 수 있는 것이다.

이전의 코드에서 input에 값을 입력할 때 뿐만 아니라 버튼을 누를 때도 콘솔에 render가 찍히는 것을 볼 수 있다.

이렇게 되면 버튼을 누를 때도 localStorage에 저장되는 비효율적인 사이드 이펙트 효과가 발생하게 된다.

🤔 의문

버튼을 눌렀을 때 말고 input에 값을 입력하여 keyword state 변수의 상태 값만 바뀔 때에만 localStorage에 값을 저장하려면 어떻게 해야할까?

React에서는 이러한 상황을 방지할 수 있도록 useEffect라는 훅(Hook)을 제공한다.

2-2. useEffect

    const App = () => {
    console.log("render");
    const [keyword, setKeyword] = React.useState(() => {
      return window.localStorage.getItem("keyword");
    });
    const [typing, setTyping] = React.useState(false);
    const [result, setResult] = React.useState("");

    React.useEffect(() => {
      console.log("effect");
      window.localStorage.setItem("keyword", keyword);
    }, [keyword]);

	// 생략

위 코드는 useEffect를 사용해서 keyword state 변수의 상태 값이 변할 때만 localStorage에 저장하게 된다.

useEffect

userEffect를 사용해서 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는 지를 말할 수 있다. 그러면 리액트는 우리가 넘긴 함수를 기억했다가(effect) DOM 업데이트를 수행한 이 후에 불러낸다.

userEffect의 첫 번째 인자로는 어떤 일을 수행해야 하는지 말하는 함수를 넣어주고 두 번째 인자로는 사이드 이펙트를 일으키고 싶은 대상을 배열로 넣어주면 된다. 이 배열을 의존성 배열(dependency array)이라고 부른다.

위 코드에서는 의존성 배열에 keyword값을 넘겨줌으로써 keyword의 상태가 바뀔 때마다 사이드 이펙트를 발생시키는 함수를 실행하는 것이다.

만약 의존성 배열이 없다면 useEffect를 사용하지 않았을 때와 같다. 인풋에 값을 입력해도 버튼을 눌러도 함수가 실행될 것이다. 즉, 모든 변화에 다 반응한다.
의존성 배열에 빈 배열 값을 준다면 어떤 행동을 해도 처음 컴포넌트가 그려지는 그 순간 즉, 처음에만 effect가 실행된다.

의존성 배열

의존성 배열이 없다면?   모든 state 변수의 변화가 일어날 때마다 실행된다.

의존성 배열이 빈 값이면?   처음 렌더링 됐을 때 한 번만 실행된다.

의존성 배열에 값이 있으면?   그 state 변수들이 변할 때마다 실행된다.

참고

</>

개발자가 되고 싶은 개발자

이전 포스트

리렌더링과 이벤트 핸들러

다음 포스트

컴포넌트의 상태 관리와 사이드 이펙트

Get to Know React

목표

1. 컴포넌트의 상태 관리

1-1. 엘리먼트? 컴포넌트?

1-2. 컴포넌트의 상태 관리(not use hooks)

1-3. 컴포넌트의 상태 관리(use hooks)

useState

구조 분해 할당

1-4. 여러 개의 컴포넌트의 상태 관리(use hooks)

🤔 의문

[참고] window 객체의 localStorage

localStorage

💡 주의

지연 초기화(lazy initialization)

🤔 의문

2. 컴포넌트의 사이드 이펙트

2-1. React에서의 사이드 이펙트(Side Effect)란?

🤔 의문

2-2. useEffect

useEffect

의존성 배열

참고

리렌더링과 이벤트 핸들러

커스텀 훅과 훅 플로우

0개의 댓글