useState란?

1

const [state, setState] = useState(initialState);

리액트에서 상태 변수를 컴포넌트에 추가할 때 사용하는 리액트 훅이다.

특징으로는 상태를 변경하기 위해서는 set 함수를 사용하여 변경해야만 하고, set 함수에 새로운 값을 인자로 전달하면 새로운 상태로 렌더링을 일으킨다.

useState로 컴포넌트 Reset 시키기

주로 어떤 상태를 reset 시키기 위해 아래와 같은 코드를 작성할 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function App() {
  const [list, setList] = useState([]);

  const resetList = () => {
    setList([]);
  };
  const addList = () => {
    setList([...list, 10]);
  };

  return (
    <>
      <button onClick={resetList}>Reset Button</button>
      <button onClick={addList}>Add 10</button>
      <div>
        {list.map((num) => (
          <p>{num}</p>
        ))}
      </div>
    </>
  );
}

위와 같이 직접 상태를 초기화 하는 방법도 있지만 key props에게 변경된 상태를 전달함으로써 해당 컴포넌트는 물론 해당 컴포넌트의 하위 컴포넌트까지 reset할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { useState } from "react";

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

function Form() {
  const [name, setName] = useState("Taylor");

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name}.</p>
    </>
  );
}

댓글 공유

useEffect란?

1

useEffect(setup, dependencies?)

외부 시스템과 컴포넌트를 동기화 하는데 사용하는 React Hook이다. 즉, 외부 시스템과 동기화하는 작업이 아니라면 useEffect를 사용하지 않는 것이 좋다.

params

setup

Effect 로직 함수로, 선택적으로 cleanup 함수를 반환할 수 있다.

• 컴포넌트가 처음 DOM에 추가 되었을 때, setup 함수가 실행된다.
• 의존성이 변경되어 리렌더링이 발생한 이후, 리액트는 이전 값으로 cleanup 함수 먼저 실행하고 새로운 값으로 setup 함수를 실행한다.
• 컴포넌트가 DOM에서 제거된 후, 리액트는 클린업 함수를 한 번 실행한다.

dependencies?

setup 함수 코드 내부와 관련된 리액트 값들의 리스트이다. 리액트 값들은 컴포넌트 내부에서 선언된 props, state, 변수, 함수들을 의미한다.

• 리액트는 이전 값과 dependencies를 Object.is() 메서드로 비교한다.
• 만약 dependencies를 명확히 기재하지 않는다면, 컴포넌트 리렌더링이 발생할 때마다 Effect가 다시 실행된다.

이전 상태를 기반으로 useEffect로 상태 업데이트 하기

1
2
3
4
5
6
7

// slider.js - 의존성 있는 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex(index + 1);
  }, 3000);
  return () => clearInterval(interval);
}, [index]);

위 코드는 slider 프로젝트를 제작하다가 나온 코드이다. setInterval을 Effect 로직에 사용하였는데, 의존성으로 indexrk 있어 index가 변경될 때마다 해당 Effect 로직이 cleanup되고 setup되고를 반복하게 된다.

1
2
3
4
5
6
7

// slieder.js - 의존성 빈 배열인 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex((i) => i + 1);
  }, 3000);
  return () => clearInterval(interval);
}, []);

위와 같이 바꿀 경우 코드는 동일하게 동작하지만, 이전 상태를 기반으로 상태를 업데이트할 때에는 이전 값을 직접 넣어주기보단 updater 함수를 콜백함수로 전달해줌으로서 의존성 데이터를 줄일 수 있다.

그 결과, 처음 컴포넌트가 렌더링되고 한번만 실행되기 때문에 불필요한 setup과 cleanup 과정을 줄일 수 있다.

댓글 공유

컴포넌트란?

자식 요소가 로딩중이 완료될 때 까지 fallback에 제공된 컴포넌트를 보여준다.

1
2
3

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

주의사항

• 리액트는 처음 마운트 되기 전에 렌더링이 중단된다면, 어떤 상태도 보존하지 않는다. 컴포넌트가 로드되면 리액트는 중단된 트리를 처음부터 렌더링을 시도한다.
• 컴포넌트는 컴포넌트 내부에서 startTransition이나 useDeferredValue로 인한 업데이트가 아닌 경우라면 fallback이 표시된다.
• 컴포넌트가 다시 일시 중단되었기 때문에 이미 보여진 컨텐츠를 감출 필요가 있다면, layout effect를 비운다. 다시 컨텐츠를 보여줄 준비가 됐을 때, 리액트는 layout effect를 발생시킨다. 이는 컨텐츠가 숨겨진 동안 DOM layout을 측정하지 않도록 한다.

사용법

컨텐츠가 로딩되는 동안에 fallback을 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { Suspense } from "react";
import Albums from "./Albums.js";

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

컨텐츠를 한번에 공개

1
2
3
4
5
6

<Suspense fallback={<Loading />}>
  <Biography />
  <Panel>
    <Albums />
  </Panel>
</Suspense>

내부에 하나의 컴포넌트라도 일시중단 되더라도 모든 하위 컴포넌트가 대기했다가 한번에 공개된다.

가장 가까운 의 fallback을 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<Suspense fallback={<Loading />}>
  <Details artistId={artist.id} />
</Suspense>;

function Details({ artistId }) {
  return (
    <>
      <Biography artistId={artistId} />
      <Panel>
        <Albums artistId={artistId} />
      </Panel>
    </>
  );
}

때문에 직접적인 자식이 아니더라도 Biography와 Albums와 가장 가까운 부모 경계를 공유하기 때문에 함께 표시된다.

로드 될 때, 중첩된 컨텐츠 표시한다.

1
2
3
4
5
6
7
8

<Suspense fallback={<BigSpinner />}>
  <Biography />
  <Suspense fallback={<AlbumsGlimmer />}>
    <Panel>
      <Albums />
    </Panel>
  </Suspense>
</Suspense>

처음에 Biography가 로딩이 완료 되지 않았을 때, BigSpinner가 fallback으로 보여지고, 이후 Biography는 로딩이 완료되었기 때문에 보여지고, 아래 Albums이 로딩이 완료되지 않았다면 AlbumsGlimmer를 보여주고 있다가 로딩이 완료되어 Albums를 보여준다.

핵심은 Biography가 Albums 로딩이 완료될 때까지 기다리지 않는 다는 것이다.

이미 공개된 컨텐츠가 숨겨지는 것을 방지하기

Code Example Link

• 내부에 startTransition이 사용되었다면, fallback이 보여지지 않는다.
• 때문에 fallback의 BigSpinner에 의해 이전에 보여진 컨텐츠가 숨겨지는 것을 방지할 수 있다.

댓글 공유

React에서 key를 사용하는 이유

리액트에서 배열 데이터와 map 메서드를 사용하여 다수의 컴포넌트를 렌더링할 수 있다.

1
2
3
4
5
6
7
8
9
10

function NumberList({ numbers }) {
  const listItems = numbers.map((number) => <li>{number}</li>);
  return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);

React 프레임워크는 state, props가 업데이트된 이후의 virtual DOM과 이전의 virtual DOM을 비교하고 변경 사항만 Real DOM에 반영하여 효율적으로 UI를 렌더링한다. 이를 재조정 과정이라고 한다.

재조정 과정에서 key가 없다면 이전 DOM과 이후 DOM의 요소를 비교하기 어려워지고 O(n^3) 복잡성을 가지는 알고리즘을 사용해야 하기 때문에 성능상 문제가 생길 수 있다.

댓글 공유

Virtual DOM이란?

Virtual DOM은 Real DOM을 효율적으로 조작하기 위해 가상으로 DOM 구조를 흉내낸 자바스크립트 객체이다.

가상적인 표현을 메모리에 저장하고 React 같은 프레임워크를 통해 Real DOM과 동기화 하기 위해 사용된다.

Virtual DOM 사용하는 이유는?

Real DOM을 조작하여 DOM Tree의 배치가 바뀌면 Real DOM의 재렌더링이 발생하기 때문에 컴퓨터에 부담이 되고 속도가 느려지게 될 것이다.

그래서 Real DOM과 구조가 똑같은 Virtual DOM을 만들고 DOM 조작이 가해진 요소만 찾아 Real DOM에 변화를 가하는 방법을 사용하여 메모리 상에서만 동작하고 실제 렌더링을 하지 않아 연산 비용을 최소화 할 수 있다.

React에서 Virtual DOM 작동원리

1. 우리가 UI를 조작하면 React는 Virtual DOM을 생성한다.
2. diffing 알고리즘을 통해 이전 Virtual DOM과 변경사항을 비교한다.
3. 이 때 변경된 부분을 파악하여 Real DOM에 반영하여 변경된 부분만 재렌더링이 발생한다.

댓글 공유

Emotion Styled Component Cascading 문제

Emotion에서 Styled Component 를 사용하면 해당 컴포넌트의 클래스 이름이 재정의된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const StyledTabPanel = styled.div<TabPanelProps<"div">>`
  padding: 5px;
  border: 2px solid hsl(219deg 1% 72%);
  border-radius: 0 5px 5px;
  background: hsl(220deg 43% 99%);
  min-height: 10em;
  min-width: 550px;
  overflow: auto;
  display: ${(props) =>
    props.dataIndex === +(props.id?.slice(-1) as unknown as number)
      ? "block"
      : "none"};
`;

function TabPanel({ children, className, ...restProps }: TabPanelProps<"div">) {
  const { selected, setSelected } = useTabsContext();

  return (
    <StyledTabPanel
      role="tabpanel"
      tabIndex={0}
      dataIndex={selected}
      className={className}
      {...restProps}
    >
      {children}
    </StyledTabPanel>
  );
}

styled component를 사용하여 TabPanel 컴포넌트를 생성하였다. 브라우저에서 해당 요소를 확인해보면 다음과 같이 알 수 없는 클래스로 나오는 것을 알 수 있다.

TypeScript 오류 - 사용량 덮어씜

props를 생성하고 해당 props를 통해 styled Component에서 조건부 스타일을 주려고 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

type Component<T extends React.ElementType> = {
  className?: string;
  children?: React.ReactNode;
} & React.ComponentPropsWithRef<T>;

type TabPanelProps<T extends React.ElementType> = {
  dataIndex?: TabsContextValue["selected"];
} & Component<T>;

const StyledTabPanel = styled.div<TabPanelProps<"div">>`
  padding: 5px;
  border: 2px solid hsl(219deg 1% 72%);
  border-radius: 0 5px 5px;
  background: hsl(220deg 43% 99%);
  min-height: 10em;
  min-width: 550px;
  overflow: auto;
  display: ${(props) =>
    props.dataIndex === +(props.id?.slice(-1) as unknown as number)
      ? "block"
      : "none"};
`;

function TabPanel({ children, className, ...restProps }: TabPanelProps<"div">) {
  const { selected, setSelected } = useTabsContext();

  return (
    <StyledTabPanel
      role="tabpanel"
      tabIndex={0}
      dataIndex={selected}
      className={className}
      {...restProps}
    >
      {children}
    </StyledTabPanel>
  );
}

• 해당 타입을 정의할 때, 필수가 아닌 선택 사항으로 정의해주어서 해결하였다.
• styled component 타입 지정 시 해당 컴포넌트의 props라고 지정을 해줘야지만 props에서 찾을 수 있다.

댓글 공유

📌 useCallback과 useMemo 사용 이유

함수 컴포넌트는 렌더링 될 때 마다 몸체가 다시 실행되므로 컨텍스트를 기억하기 위해 Hook을 사용한다. 그리고 상위 컴포넌트는 기억된 상태 또는 업데이트 함수를 하위 컴포넌트에게 전달한다.

이 때 상위 컴포넌트가 다시 실행되면 이벤트 핸들러 함수들도 새로 그려지므로 동일참조를 벗어난다.

🐸 useCallback

useCallback()은 하위 컴포넌트에 전달되는 함수를 기억해두고 이를 이용하여 컴포넌트 업데이트 시 리렌더링이 발생할 때, 기억된 함수를 사용해 불필요한 리렌더링을 줄여 성능을 높이기 위해 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

export function Counter({ count: initialCount, step }) {
	const [count, setCount] = useState(initialCount);

	// 1
	const handleIncrement = useCallback(() => {
		setCount((count) => count + step);
		}, [step]);

	// 2
	const handleDecrement = useCallback(() => {
		setCount(count - step);
		}, [count, step]);

	return (
		<div>
			<Counter.Button onClick={handleDecrement}>-</Counter.Button>
			<Counter.Display>{count}</Counter.Display>
			<Counter.Button onClick={handleIncrement}>+</Counter.Button>
        </div>
    )

• 기억해야할 데이터 타입이 함수인 경우 사용한다.
• useEffect()처럼 종속성 배열을 통해 조건에 따라 기억 여부를 재설정할 수 있다.
• 1번처럼 콜백함수로 전달해주는 경우는 reduce처럼 함수를 기억하고 있는다. 기억되어있는 정보를 가지고 값을 변경하는 것이다.
• 2번처럼 값을 전달해주면 newState로 받아들여져서 종속성 배열이 바뀌면 렌더링이 발생하게된다. 기억하지 않고 새로운 값을 전달해주고 그 값으로 렌더링해준다.

🐍 useMemo

1

useCallback(fn, deps) === useMemo(() => fn, deps);

useMemo()는 JavaScript 데이터 타입을 기억해야 할 때 사용합니다. 만약 기억해야할 타입이 함수라면 useCallback을 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

export function Counter({ count: initialCount, step }) {
  const [count, setCount] = useState(initialCount);

  // useMemo(() => fn, deps)
  const handleIncrement = useMemo(
    () => () => setCount((prevCount) => prevCount + step),
    [step]
  );

  // useCallback(fn, deps)
  const handleDecrement = useCallback(() => {
    setCount((prevCount) => prevCount - step);
  }, [step]);

  // memoized Components
  const DecButton = useMemo(
    () => <Counter.Button onClick={handleDecrement}>-</Counter.Button>,
    [handleDecrement]
  );

  const IncButton = useMemo(
    () => <Counter.Button onClick={handleIncrement}>+</Counter.Button>,
    [handleIncrement]
  );

  return (
    <div>
      {DecButton}
      <Counter.Display>{count}</Counter.Display>
      {IncButton}
    </div>
  );
}

• useMemo()는 해당 컴포넌트를 기억한다.
• 종속성 배열 [count, onDecrement, onIncrement, restProps]이 변경되면 useMemo가 반환하는 값을 기억하고 실행한다.
• setCount()를 기억하고 있어 동일참조를 하므로 count 값을 기억하고 있다.

🏓 소감

값을 기억하는 목적으로 좋지만… 굳이 이것을 사용하려고 복잡하게 또 많은 시간을 할애할 필요가 있을까 ?

댓글 공유

🐶 useRef()

리액트에서 ref는 주로 DOM 노드 참조 목적으로 사용된다. 컴포넌트 렌더링에 영향을 주지 않는 값 참조 목적으로 사용된다.

useRef()는 함수 컴포넌트 내부에서 특정 값을 지속적으로 참조할 때 사용한다. useState()와 달리 useRef()는 현재 값이 변경되어도 컴포넌트가 다시 렌더링되지 않아 애플리케이션 성능을 최적화 할 수 있다.

1
2
3
4
5

// useRef() 훅을 사용해 카운트 참조 생성
const countRef = useRef(0);

// 카운트 참조의 현재 값이 변경되어도 컴포넌트는 다시 렌더링 되지 않음
countRef.current = countRef.current + 1;

클래스는 자신의 인스턴스 멤버를 사용해 렌더링 상관없이 특정 값을 기억할 수 있는데 반해, 함수는 다시 렌더링 되면 매번 함수 몸체가 초기화 되므로 특정 값을 기억할 때 useRef()를 사용하면 유용하다.

🐥 useRef() 사용목적

1. DOM 요소 접근 및 조작

리액트 render() 단계에서는 DOM이 그려지기 전 단계이므로 DOM에 직접 접근할 수 없다.

하지만 useRef()를 사용하여 컴포넌트가 mount된 시점 이후 DOM 요소에 접근하여 조작할 수 있도록 도와준다.

1
2
3
4
5
6
7
8
9
10
11
12
13

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• 아직 DOM이 그려지기 전이라 DOM 요소에 접근하여 focus()를 활성화 시킬 수 없지만, useRef()를 사용하여 클래스 컴포넌트 생명주기를 고려하여 DOM 요소에 접근할 수 있도록 도와준다.

2. 함수 컴포넌트 내부에서 특정 값을 기억

함수 컴포넌트 내부에서 특정 값을 기억하면서 값을 변경해도 컴포넌트 렌더링에 영향을 주지 않아야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import { useEffect, useRef, useState } from "react";
import randomcolor from "randomcolor";

function DoNotReRender() {
  const colorRef = useRef(0);
  const [stateValue, setStateValue] = useState(0);
  const [stateHex, setStateHex] = useState(randomcolor());
  const [refHex, setRefHex] = useState(randomcolor());

  useEffect(() => {
    setStateHex(randomcolor());
  }, [stateValue]);

  useEffect(() => {
    setRefHex(randomcolor());
  }, [colorRef]);

  return (
    <Grid lang="en">
      <GridItem
        css={`
          background: ${stateHex};
        `}
      >
        <h2>State</h2>
        <ChangeColorButton
          aria-label="state 컬러 변경"
          onClick={() => setStateValue(stateValue + 1)}
        />
        <p>컬러 변경 버튼을 누르면 컴포넌트가 다시 렌더링 됩니다.</p>
      </GridItem>
      <GridItem
        css={`
          background: ${refHex};
        `}
        onClick={() => {
          colorRef.current += 10;
          console.log(`colorRef.current = ${colorRef.current}`);
        }}
      >
        <h2>Ref</h2>
        <ChangeColorButton aria-label="ref 컬러 변경" />
        <p>컬러 변경 버튼을 누르면 컴포넌트가 다시 렌더링 될까요?</p>
      </GridItem>
    </Grid>
  );
}

• useState()의 setStateValue()메서드를 사용하여 값을 변경한 경우 재렌더링이 발생하지만, useRef()의 current 값을 갱신하면 재렌더링이 발생하지 않는다.

댓글 공유

📌 useEffect

1

useEffect(effectCallback);

함수 컴포넌트에서 발생 가능한 side-effect(부수효과)를 관리하기 위해 사용한다.

• 비동기 통신 요청 및 응답
• DOM 조작
• 구독/취소 등

리액트가 할 수 없는 작업을 할 때, useEffect()를 사용한다.

🌈 React Hook 실행 흐름

리액트 Hook의 실행흐름은 위 사진과 같다.

함수 컴포넌트에서 클래스 컴포넌트의 생명주기를 구현하기 위해 useEffect()가 componentDidMount(), componentDidUpdate(), componentWillUnmount() 메서드가 발생되는 주기를 대체할 수 있어야한다.

useEffect()가 이들을 100% 대체할 순 없지만 문제없을 정도로 흉내내어 사용하고 있다.

🐥 이펙트 조건 처리

1. componentDidMount() 대체 방법

1
2
3

useEffect(() => {
  // componentDidMount
}, []);

• useEffect 2번째 인자로 빈 배열을 주게되면 컴포넌트가 처음 mount 되는 때에 한번만 호출된다.

2. componentDidUpdate() 대체 방법

1
2
3
4
5
6
7

useEffect(
	() => {
		// componentDidMount
		// componentDidUpdate
	}.
	[...dependencies]
);

• useEffect 2번째 인자로 빈 배열 대신 관리할 상태가 추가되면 해당 상태가 변경될 때에만 이펙트 함수가 실행된다. 즉, mount될 때는 1번 실행되고, update 될 때 마다 실행된다.

3. componentWillUnmount() 대체 방법

이벤트 구독/취소처럼 컴포넌트가 제거될 때 실행되어야 하는 함수의 경우 다음과 같이 사용한다.

1
2
3
4
5
6
7
8
9

function Tester() {
  useEffect(() => {
    let clearId = setInterval(() => console.count(), 500);
    // 정리 함수(cleanup)
    return () => {
      clearInterval(clearId);
    };
  }, []);
}

• cleanUp 함수는 메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 직전에 수행된다.
• Effect 함수가 실행될 때마다 cleanUp 함수가 먼저 실행되어 정리한다.

이는 componentWillUnmount()처럼 동작하는 것 같지만, 리액트 팀은 클래스 컴포넌트 생명주기대로 로직을 구현했을 때, 대규모 프로젝트에서 버그를 많이 발견하였다.

그리하여 리액트 팀에서는 구독취소 후 다시 구독하는 과정을 통해 이를 구현하였다.

1
2
3
4
5
6
7
8
9
10

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // props.friend.id가 바뀔 때만 재구독합니다.

댓글 공유

📌 useState

1

const [stateValue, stateUpdater] = useState(initState);

함수 컴포넌트에서 상태를 관리할 때 사용하는 API이다.

• stateUpdater는 보통 setStateValue 이런식으로 set을 붙혀서 사용한다.

🐸 지연된 초기화

initState값은 초기 렌더링 시에만 사용되는 값으로, 이후 렌더링 시에는 무시된다. 만약 초깃값을 계산하는데 많은 시간이 필요한 경우 콜백함수를 통해 지연된 초기화 처리가 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const [stateValue, stateUpdater] = useState(() => {
  // 계산에 적지 않은 시간이 소요될 경우
  // 약 790.62890625 ms
  const initialState = fibonacci(39);

  // 계산 이후: 지연된 초기화의 처리 값을 반환
  return initialState;
});

// 또는 localStorage에서 값을 읽어오는 경우
const [stateValue, setUpdater] = useState(() => {
  const persnalization = localStorage.getItem("persnalization");
  return JSON.parse(persnalization);
});

⛳️ 객체 타입 상태 관리

updateState 함수는 setState 함수처럼 객체 상태를 관리하기 합성된 객체를 반환해야 한다.

1
2
3
4
5
6
7
8
9

const [state, updateState] = useState({
  key1: false,
  key2: true,
});

updateState({
  ...state,
  key2: true,
});

• updateState 함수는 상태 병합이 아닌 대체를 하므로 변경되지 않는 객체 값을 유지하기 위해서 위와 같이 해야한다.

댓글 공유