react에서 useState를 이용한 상태관리

useState란?

컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다.

const [state, setState] = useState(초기값);

useState 함수의 기본 꼴이다.
state라는 변수를 선언하고 그 값은 useState 괄호 안의 값을 초기값으로 초기화 된다. 그리고 setState함수를 통해서 해당 값을 바꾸고, setState함수를 통해 state가 바뀌게 된다면 해당 컴포넌트가 다시 랜더링 된다.

useState를 왜 사용하는가?!

이 아이콘의 배경색은 지금의 색깔이 defalut 값이지만 클릭을 하게 된다면 배경색이 변하게 될 것이다.

저 아이콘의 코드는 아래와 같다.

//CircleIconChip.tsx 아이콘의 전반적인 기능을 관리하는 코드이다
import React, { useState } from 'react';
import { SVGIcon, SVGIconProps } from '@/components/UI/SVGIcon';
import * as S from './CircleIconChip.styles';

export type CircleIconChipProps = SVGIconProps

const CircleIconChip = (props: CircleIconChipProps) => {
  const [isToggled, setIsToggled] = useState<boolean>(false);

  return(
    <S.Root>
      <S.Wrapper
        flex={'rowCenter'}
        isToggled={isToggled}
        onClick={() => setIsToggled((prev) => !prev)}
      >
        <SVGIcon {...props}></SVGIcon>
      </S.Wrapper>
    </S.Root>
  )

};

export default CircleIconChip;

//CircleIconChip.style.ts 아이콘의 style에 관련된 코드들을 작성한 파일이다
import styled from '@emotion/styled';
import { Flex } from '@/components/UI/FlexBox';

export const Root = styled.div`
  width: 3.6rem;
  height: 3.6rem;
`;

export const Wrapper = styled(Flex)<{ isToggled: boolean }>`
  border-radius: 50%;
  width: 100%;
  height: 100%;
  gap: 0.8rem;
  background-color: ${({ theme, isToggled }) => (isToggled ? theme.color.nav.active : '#F6F7FB')};
`;

이 코드에서 가장 주목하면 되는 부분은 background-color이다. isToggled값에 따라 배경색이 바뀌게 되어있다.

하지만 생각해야 하는 부분은 내가 저 아이콘을 클릭한다고 하면 아이콘의 isToggled 값이 true -> false, false -> true로 바뀌기는 하지만 isToggled값이 바뀐다고 한번 랜더링 된 아이콘이 다시 로드해주지 않으면 색은 바뀌지 않을 거 아닌가?이다.

그러면 내가 클릭을 했을때 isToggled 값만 바뀌는 것이 아니라 배경색도 같이 바뀌었으면 하는데 그러면 다시 랜더링을 해야한다. 하지만 화면 전체를 랜더링하면 너무 비효율적이므로 내가 클릭을 하여 값이 변한 부분만 다시 랜더링 해주면 참 좋을텐데... 라는 말에 대답해 주는 것이 useState이다.

useState를 사용하면 다른점

그래서 isToggled 값이 바뀔 때마다 background-color를 다시 랜더링 해줘야 하는데 이 역활을 해주는 함수가 useState 함수이다.
위 컴포넌트를 클릭하면 setIsToggled 함수를 통해서 isToggled의 값이 true -> false or false -> true로 바뀌게 된다. setIsToggled를 통해 isToggled의 값이 바뀌게 되었으므로 해당 컴포넌트가 다시 랜더링 될 것이고 그러면 클릭과 동시에 isToggled 값에 따라 배경색도 바뀌게 된다.

나의 코드에서는 isToggled가 사용되는 부분이 한 부분밖에 없지만, 여러 곳에서 사용되는 경우에도 우리는 이런 편리한 기능들 덕분에 isToggled의 값이 바뀔때 마다 같이 바뀌어야 하는 다른 친구들을 소환하지 않아도 자동으로 바꿀 수 있다!