안녕하세요 ;) 웹 프론트엔드 개발자 Garden입니다.

인턴을 시작한지도 어느 덧 4개월이 되어가는 시점에서 지난 4월 한 달은 테스트 업무에서 벗어나 처음으로 사내 운영성 업무 를 하게 되었는데요! 이때 사내 프론트엔드 코드를 각잡고 꼼꼼하게 보게 되었는데 이번 운영성 업무들을 하면서 아래와 같은 이유 때문에 반성을 많이 하게 되었습니다 🥲

왜냐하면 제가 그동안 컴포넌트 상태는 거의 대부분 useState로만 구현했었다는 점이었습니다.. 우선 "상태부터 구현하고 보자!" 라는 생각이 쭉 습관으로 이어져 된 것 같았어요 .. 그래서 useReducer, useRef로 관리되는 사내 코드를 보았을 때 동작 원리를 이해하고 이를 응용해서 useState -> useReducer, useRef로 리팩토링하는 과정에서 시간을 많이 투자했기 때문입니다.

위의 이슈로 제 지난 시간을 반성하며 오늘은 React에서 상태에 대한 모든 Hooks에 대해 다시 공부하고 스스로 누군가에게 설명하듯 정리하는 시간을 가져보겠습니다!

Intro.

우리는 프론트엔드 개발을 하면서 상태 를 구현하는 개발 flow가 어떻게 되었는지 회고해봅시다.
상태에는 컴포넌트 상태 , 전역 상태, 서버 상태 가 대표적으로 있고, 이 상태들을 관리하다가 보니 상태 변경이나 상태 최적화와 같은 상태를 관리하는 방법들을 생각하게 됩니다. 이때 렌더링에 문제가 생긴다면 렌더링 최적화를 해야하고, 이 과정에서 나오는 상태 관리자들을 배우고 .. 이런 일들이 지속적으로 반복되고 있습니다...

결론적으로 상태를 관리하면서 이때 생기는 렌더링 때문에 계속 최적화 해나아가는 과정에서 왜 상태관리를 하고 있지 라는 의문이 들게 되었습니다

Main

01. 상태란 무엇일까?

근본적으로 상태란 무엇인지 생각해보고 싶습니다. 상태는 무언가의 모양이나 형편을 뜻해요! 예시를 들자면 Garden은 오늘 행복한 상태야 ;) or 이미 왕십리역에는 막차가 끊긴 상태 가 될 수 있겠네요

그럼 개발에서의 상태란 어떤 게 될 수 있을까요?

export const ButtonStyles: CssArchiveType = {
  default: css`
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    border: none;
    cursor: pointer;
    background-color: ${Colors.Primary};
    color: ${Colors.White};
  `,
  `,
...
}

위의 스타일 코드를 봐도 알 수 있듯이, 왼쪽은 상태의 네이밍이나 필드를 표기하고 있고, 오른쪽에는 그때의 상태를 작성해주고 있습니다. 그러니까
background-color: ${Colors.Primary} 를 보면 배경색은 ${Colors.Primary} 상태로 지정해 라는 의미로 볼 수 있습니다.

우리가 개발을 하기 전에 "어느 부분에서 상태가 필요하고 어떤 상태가 필요할 지" 생각해보는 과정을 개발 설계에 들어가면 좋을 것 같습니다.

02. 상태의 올바른 초기 값

자 이제 본격적으로 상태의 올바른 초기값을 설정해보겠습니다.
먼저 초기 값 이란, 리액트에서 하나의 컴포넌트를 렌더링하는데 여러 일이 발생하고, 내가 생각한 대로 동작하지 않아 에러가 발생할 수 있습니다.

코드로 살펴보자면,

function getData () {
  const [data, setData] = useState();
  
  useEffect (() => {
    const fetchData = async () => {
      
      const response = await fetch("https://api.example.com");
      const result = await response.json();
      setData(result);
    };
    
    fetchData();
    
  }, []);
  
  return (
    {data.map((item) => (
    	~~
    }
    );
}

위의 초기 값 선언에서는 useState안에 아무것도 없으므로 아무 값도 설정되어있지 않습니다.
그리고 fetchData라는 함수가 실행이 되면 그제서야 setData가 되면서 data안에 값이 들어가게됩니다.
return문 안에서 data를 잘 받아와 넣으면 잘 실행된다고 볼 수 있기도 하겠지만
받아온 데이터를 렌더링하는데 데이터가 없어서 .map()을 array의 프로토타입에서 가져오는 순간의 차이 때문에 렌더링 오류가 발생할 것입니다.
따라서 무의미한 코드가 들어가는 것을 방지하기 위해서, array가 맞는지 data를 먼저 확인해야하는 코드가 선언되어야합니다. 아래와 같이 고쳐볼 수 있겠네요!

    {Array.isArray(data) && data.map((item) => (
    	~~
    }

그런데 이 방법은 올바르지 않습니다. 위의 예시는 초기 값이 없었기 때문에 작성해줘야하는 코드이기 때문입니다. 우리는 위와 같은 상황에서 초기 값을 설정할때 배열을 넣어 다음과 같이 초기 값을 할당해줄 수 있습니다.

  const [data, setData] = useState([]);

리액트 렌더링은 우리가 생각하는 것과 다르게 여러 번 발생되고 속도가, 순서가 제각각이기에 초기 값이 정말 중요하다는 것을 깨닫게 되었습니다.

그리고 useState를 비워두게 된다면 그 변수에 들어가는 값은 undefined가 되니 항상 초기값 설정에 주의하도록 합시다.

따라서 이 질문의 시작인 초기 값이란,

• 가장 먼저 렌더링 될 때 순간적으로 보여질 수 있는 값
• 초기에 렌더링 되는 값

으로 정리할 수 있을 것 같습니다.

이를 지키지 않는다면? -> 렌더링 이슈, 무한 루프, 타입 불일치로 의도치 않은 동작 -> 런타임 에러 발생하게 됩니다.

또한 초기값 잘 설정해준다면 빈값이나 null 처리를 할 때 불필요한 방어코드도 줄여 더 안전한 컴포넌트를 개발할 수 있을 것입니다.

03. 업데이트 되지 않는 값

이번에는 변수를 리액트 컴포넌트 내부에 직접적으로 가지고 있을 때에 대해 살펴보겠습니다.

function NotUpdataValue() : Element {
  const INFO = {
    name: 'My Component',
	value: 'Clean Code React',

	const [ count, setCount] = useState(0);

	return(
      <div className = "App">
      	<header>{INFO}</header> // child
		<ShowCount info={INFO} count={count} /> //props
	  </div>
   );
}

위의 함수 선언부를 보면 INFO라는 객체가 선언되어 있습니다. 이런 경우는 상수를 다루거나, 일반적인 방치가 가장 흔한 경우입니다. 이 객체는 현재 return문 전에 어떤 부분에서도 사용되고 있지 않는 것을 확인할 수 있습니다. 즉 이 객체에 있는 속성을 바꾸는 경우가 전혀 있지 않습니다.

즉 INFO 객체는 현재 업데이트가 되지 않는 일반적인 객체라고 볼 수 있습니다. 하지만 return 문 안에서 보면 header에서는 child로, ShowCount에서는 하나의 props로 객체를 내리고 있다는 것을 알 수 있습니다. 이 경우는 부적절한 경우인데, 그 이유는 리액트 컴포넌트 내부에 있는 애들인데 매번 렌더링이 될 때마다 같은 값이더라도 불필요하게 참조하고 있는 상태이기 때문입니다.

위의 경우는 2가지 경우로 리팩토링을 할 수 있는데 바로 리액트 상태로 변환 or 외부로 내보내기 의 방법을 고안할 수 있습니다. 아예 컴포넌트 외부로 빼는 것이 좋습니다 :)

  const INFO = {
    name: 'My Component',
	value: 'Clean Code React',
  }

function NotUpdataValue() : Element {
	const [ count, setCount] = useState(0);

	return(
      <div className = "App">
      	<header>{INFO}</header> // child
		<ShowCount info={INFO} count={count} /> //props
	  </div>
   );
}

04. 불필요한 상태 제거하기

이제는 초기값을 바꿔야하는 경우나 값이 변하는 경우를 살펴보겠습니다.

const Mock_data = [
  {
    userId: 1,
    id: 1,
    title: 'clean code',
    completed: false
  },
  {
    userId: 2,
    id: 2,
    title: 'funny code',
    completed: true
  },
...
  ]
  
function NotUnessState() {
const [userList, setUserList] = useState(Mock_data) //초기 상태 선언
const [complUserList, setComplUserList] = useState(Mock_data) //변경 후 저장할 상태 선언

}

위와 같이 완료한 일만 가지고 있는 유저리스트를 생성해보았습니다. Mock_data에서 completed가 true인 항목들만 list로 바꾸고 싶다고 가정해보겠습니다.

const [complUserList, setComplUserList] = useState(Mock_data) 

useEffect((): void => {
  const newList = complUserList.filter(user) : boolean => user.completed === true);
  setUserList(newList);
},[userList];

이렇게 조건을 설정해 작성해보았는데 이것도 비효율적인 코드라고 볼 수 있습니다.
위의 코드를 useEffect() 밖으로 빼서 내부의 변수로 선언하게 하면 됩니다.

const complUserList  = complUserList.filter(user) : boolean => user.completed === true);

렌더링 될 때마다 값이 바뀌고 관여되지만 이 값은 굳이 상태로 만들 필요가 없다고 볼 수 있습니다.
결국 렌더링 시 고유의 complUserList 가 생성되기 때문에 관리할 필요도 없고 set할 필요도 없게 됩니다.

저는 이때 컴포넌트 내부에 선언된 변수를 어떤 역할을 하는지 궁금했는데요,
컴포넌트 내부에서의 변수는 렌더링 마다 고유의 값을 가지는 계산된 값을 가진다라고 볼 수 있습니다.

결론적으로 우리가 불필요한 상태를 만든다면?
결국에는 리액트에 의해 관리되는 값이 늘어나는 것이고,
그러다보면 렌더링에 영향을 주는 값이 늘어나서 관리 포인트가 더더욱 늘어나게 됩니다.

05. useState를 대신하여 useRef

컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야하는 경우에는 useState 대신에 useRef를 사용하여 구현할 수도 있는데요! 결국 리렌더링 방지가 필요할 때 useRef를 사용하게 됩니다.

useState를 통해 값이 만들어지면 setState가 동작을 하면서 원하지 않는 리렌더가 컴포넌트에 발생되기 때문입니다. 그렇기 때문에 리렌더가 되지 않고 초기값을 나타내거나 리렌더가 굳이 되지 않고 렌더링 프로세스와 관계없이 값을 가변적으로 저장하고 싶은 경우 그때는 useRef를 고려하는게 좋을 것 같습니다.

먼저 useState로 사용자의 입력을 추적하고 화면에 표시하는 컴포넌트 예시를 살펴보겠습니다.

import { useState } from 'react';

function InputComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>입력값: {inputValue}</p>
    </div>
  );
}

export default InputComponent;

위의 코드에서는 inputValue 상태가 변경될 때마다 컴포넌트가 리렌더링되고, 사용자가 입력 필드에 문자를 입력할 때마다 setInputValue 함수가 호출되어 상태가 갱신되고, 이로 인해 컴포넌트가 새로 렌더링 됩니다.

이제는 useRef를 사용해서 리렌더링을 유발하지 않으면서 값이 유지되는 ref객체를 반환해 상태의 변경을 추척하면서 컴포넌트의 불필요한 리렌더링을 방지하는 코드를 작성해보겠습니다.

import { useRef } from 'react';

function InputComponentWithRef() {
  const inputValueRef = useRef('');

  const handleChange = (event) => {
    inputValueRef.current = event.target.value;
    console.log(`입력값: ${inputValueRef.current}`);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
    </div>
  );
}

export default InputComponentWithRef;

위의 코드에서는 inputValueRef를 사용하여 입력값을 추적하고 있습니다. 게다가 useRef는 컴포넌트의 리렌더링을 발생시키지 않으므로 handleChange 함수 내에서 입력값이 갱신되어도 화면이 새로 렌더링 되지 않습니다. 꼭 DOM에 붙여서 쓰는 것만이 ref 사용에 다는 아니다라는 것을 알 수 있습니다.

06. useState 대신에 useReducer

여러 상태들 중에서 구조화된 상태를 원하면 useReducer를 사용해보는 걸 고려할 수 있습니다.

저는 useReducer를 처음 봤을 때 리덕스랑 비슷하다는 생각을 했었는데요, 알고보니 문법이 유사하다는 것을 깨달았습니다 하하 코드로 한 번 살펴보겠습니다.

const INIT_STATE = {
	isLoading: false,
    isSuccess: false,
    isFail: false,
}

function StateToReducer(){
  const [state, dispatch]= useReducer(reducer, INIT_STATE)

여기서 잠깐 reducer 작성 방법을 살펴보면, 먼저 useReducer()이라는 함수를 먼저 가져오고
마찬가지고 배열 구조 분해 할당해서 가져옵니다. 위의 코드에서 state를 가져오고 이 상태를 set하는 dispatch를 가져옵니다.
첫 번째 인자로는 reducer를 가져오고 이는 조작하는 함수가 됩니다. 두 번째 인자에는 초기값을 넣을 수 있다고 생각하면 됩니다.

여기서 reducer callback으로 현재 상태와 이 상태를 변화할 수 있는 액션을 받는 reducer를 선언해보겠습니다.

...

const reducer = (state, action) =>{
  switch (action.type){
    case 'FETCH_LOADING':
      return { isLoading: true, isSuccess: false, isFail: false} 
    case 'FETCH_SUCCESS': 
      return { isLoading: false, isSuccess: true, isFail: false} 
    case 'FETCH_FAIL': 
      return { isLoading: false, isSuccess: false, isFail: true} 
    defalt:
      return INIT_STATE
} 
function StateToReducer(){
  const [state, dispatch]= useReducer(reducer, INIT_STATE)

먼저 해당 액션의 type을 받을 수 있습니다. 그리고 swich 문으로 각각의 조건에 맞게 바뀔 값을 직접 명시해줍니다.

그 다음에 함수 내부에서 dispatch를 호출하고, 타입에 우리가 정의한것을 넣어주면 됩니다.

...

function StateToReducer(){
  const [state, dispatch]= useReducer(reducer, INIT_STATE)
  
  const fetchData = () => {
    dispatch({ type: 'FETCH_LOADING'})
    ... 동일하게 ㄱㄱ

이렇게 리팩토링하면 상태를 세밀하게 작성할 수 있고, reducer 함수를 작성한 부분은 순수한 js 문법이기 때문에 react에 의존적인 코드가 아닙니다.

useReducer는 상태를 하나하나 조작하고, 로직이 얽혀있는 부분을 다 추상화 해줍니다. action type만 호출하면 그 안의 내부 로직이 모두 추상화 되어있기 때문에 함수를 호출하는 구문에서는 내부에 뭐가 있는지 몰라도 action type만 보고도 추정할 수 있다는 장점이 있습니다.

07. 상태로직을 Custom Hooks로 꺼내기

우리는 항상 컴포넌트를 개발할 때, 화면에 렌더링 되는 코드만 남기고, 로직에 관련된 부분만 빼보는 리팩토링이 중요한데요! 이때 custom hook을 사용해 구현할 수 있습니다.

간단한 사용자 입력을 처리하는 상태로직이 구현된 예시 코드로 먼저 살펴보겠습니다.

import { useState } from 'react';

function useInputHooks(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return [value, handleChange];
}

여기서 useInputHooks이라는 커스텀 훅을 만들어 입력 값을 관리하고, 이 입력 값을 변경하는 함수와 입력값을 반환하도록 코드를 구현했습니다.

import React from 'react';
import  useInputHooks from './hooks/useInputHooks';

function InputComponent() {
  const [inputValue, handleInputChange] = useInput('');

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>입력값: {inputValue}</p>
    </div>
  );
}

export default InputComponent;

위의 코드에서는 앞서서 만든 useInputHooks를 사용해서 사용자의 입력 필드의 상태를 관리하는 컴포넌트 코드입니다. useInputHooks를 이 컴포넌트 뿐만아니라 다른 컴포넌트에서도 사용할 수 있기때문에 코드를 확장성있고 재사용 가능하게 작성할 수 있게 됩니다!

End.

오늘 이 포스팅을 작성하면서 "당연하게 작성했던 것들" 에 대해서 라이브 코딩을 해보면서 습관의 의존성을 반성을 하게 되었습니다. 또한 말로 설명하다보니 제가 몰랐던 부분에 대해서 정확히 짚고 갈수 있었고
특히 reducer 부분이 회사에서는 이해하기 오래 걸렸는데 문법 책을 보고 하나하나 직접 쌩 코딩을 해보니까 동작원리를 알아가게 될 수 있었던 시간이었습니다.
이제부터는 대부분 useState()에 익숙했던 시간을 졸업하고 좀 더 나은 hooks 들로 클린코드를 짜는 연습을 하는게 중요할 것 같습니다 🔥 🔥