[TIL] 오늘 배운 내용 정리 typescript template literal type, React state 유지 혹은 리셋

1. 타입스크립트의 template literal를 사용하면 다양한 타입을 만들수 있다.

type T4Numbers = `${number}${number}${number}${number}`;
type T3Numbers = `${number}${number}${number}`;
type T2Numbers = `${number}${number}`;


const n:T4Numbers ="123"
//Type '"123"' is not assignable to type '`${number}${number}${number}${number}`'.

typescript는 아직 regex를 활용한 타입 추론을 지원해 주고 있지 않고 있다.

https://github.com/microsoft/TypeScript/issues/41160

위 링크를 확인하면 지원해 주지 않음에도 불구하고

유사한 문제를 template literal를 활용한 좋은 예시를 찾아볼 수 있다.

2. React에서 같은 위치에 같은 컴포넌트 가 있을경우 state가 유지된다.

import "./App.css";
import Button from "./Button";
import { useState } from "react";

function App() {
  const [toggle, setToggle] = useState(true);

  return (
    <div className="App">
      <button
        onClick={() => {
          setToggle((prev) => !prev);
        }}
      >
        토글
      </button>
      {toggle ? <Button title={"참"} /> : <Button title={"거짓"} />}
    </div>
  );
}

export default App;

import { useState } from "react";

export default function Button({ title }) {
  const [number, setNumber] = useState(1);
  return (
    <button onClick={() => setNumber((prev) => prev + 1)}>
      {number} {title}
    </button>
  );
}

다음과 같은 코드가 있을때 Button을 누르고 토글 버튼을 누르게 되면 어떻게 될까?

위의 number state가 유지되는 것을 볼 수 있다.

같은 위치, 같은 컴포넌트에 있을 경우 state가 유지된다.

1. key를 활용한 해결 방법

import "./App.css";
import Button from "./Button";
import { useState } from "react";

function App() {
  const [toggle, setToggle] = useState(true);

  return (
    <div className="App">
      <button
        onClick={() => {
          setToggle((prev) => !prev);
        }}
      >
        토글
      </button>
      {toggle ? (
        <Button title={"참"} key={"참"} />
      ) : (
        <Button title={"거짓"} key={"거짓"} />
      )}
    </div>
  );
}

export default App;

key값을 다르게 부여하면 위 문제를 해결할 수 있다.

React에서 같은 위치에 key가 다를 경우에도 다른 컴포넌트로 인지한다.

💡

React에서 같은 위치에서 컴포넌트의 tag혹은 key가 다를 경우 다른 컴포넌트로 인식해 제거하고 다시 생성한다.

다음과 같이 state가 유지되지 않는 것 을 볼 수 있다.

2. 번외편 &&를 활용한 해결 방법

import "./App.css";
import Button from "./Button";
import { useState } from "react";

function App() {
  const [toggle, setToggle] = useState(true);

  return (
    <div className="App">
      <button
        onClick={() => {
          setToggle((prev) => !prev);
        }}
      >
        토글
      </button>
      {toggle && <Button title={"참"} />}
      {!toggle && <Button title={"거짓"} />}
    </div>
  );
}

export default App;

&&를 활용해서 역시 해결 가능하다.

2-1 주의해야 할 점

{toggle && <Button title={"참"} />}
{!toggle && <Button title={"거짓"} />}

{toggle ? <Button title={"참"} /> : <Button title={"거짓"} />}

얼 핏 보면 두 코드가 유사해 보인다.

&& 로 작성된 것을 삼항 연사자로 변경해서 확인해보면 다음과 같다.

{toggle ? <Button title={"참"} /> : false}
{!toggle ? <Button title={"거짓"} />: false}

React에서는 false 를 JSX tree에서 비어있는 값 으로 표현한다.

즉 Button의 위치가 달라졌기에 state가 유지되지 않는다.

references

https://github.com/microsoft/TypeScript/issues/41160#issuecomment-831846373

https://beta.reactjs.org/learn/preserving-and-resetting-state

https://beta.reactjs.org/learn/conditional-rendering

https://ko.reactjs.org/docs/reconciliation.html

Uploaded by N2T