리액트를 하면서 배운 것들 정리

리액트는 완전 초보라 모르는게 너무 많다. 나중에 까먹었을때 찾아보는 용도로 정리한다.

Object를 루프 돌려서 리액트 컴포넌트 그리기

좀 놀라운 일이지만 자바스크립트의 Object는 iterable이 아니다. 즉 for문에 사용할 수 없다. 그러면 어떻게 하면 되느냐. entries() 라는 메서드를 사용하면 iterable을 반환한다.

const obj = {
  a: '앤디',
  b: 123
}


for (const o of obj) {
  console.log(o); // 에러남
}

for (const [key, value] of obj.entries()) {
  console.log(key, value);
}

다른 방법으로는 keys, forEach 를 사용하는 방법도 있다.

object.keys().forEach((key) => { // do something })

오브젝트로 리액트의 컴포넌트를 루프를 돌려서 그리고 싶은 경우 사용한다.

{Object.keys(object).map((key) => {
  return <Option value={key}>{object[key]}</Option>;
})}

url의 쿼리파라메터 파싱하기

구글링을 해보면 query-string 패키지를 쓰고 있는것을 많이 발견하고는 하는데, URLSearchParams 를 사용하자.

관련해서 간단한 hook을 만들었다.

import { useLocation } from "react-router-dom";

export const useSearchParams = (name: string) => {
  const { search } = useLocation();
  const searchParams = new URLSearchParams(search);
  return searchParams.get(name) || "";
};

사용은 아래와 같이 하면 된다.

const param1 = useSearchParams("param1")

값이 없는 경우는 빈 문자열을 리턴하도록 해두었다.

query-string 의 parse 함수가 리턴하는 타입이 string 또는 string[] 라서 굉장히 많은 삽질을 했다.

antd의 셀렉트 박스의 사이즈 고정하기

별다른 것은 없고 style에서 width 속성을 줘서 사이즈를 고정시킬 수 있다. 안그러면 선택된 값에 따라 셀렉트 박스의 가로 크기가 동적으로 변하게 된다.

<Select style={{width: 100}}>
  ...
</Select>

조건부 렌더링

나의 경우에는 셀렉트박스의 disable 옵션을 파라메터에 따라 다르게 표시하고 싶은게 하고 싶은것이었는데, 생각보다 해야되는 것이 많아서 아예 조건부 렌더링을 하도록 변경했다.

const MyComponent = ({ category }) => {
  return (
    <>
      {category === "9999" && (
        <Select size="large" placeholder="-대분류-" style={{ width: 100 }}>
          ... 생략
        </Select>
      )}

      {category !== "9999" && (
        <Select size="large" disabled value={category} style={{ width: 100 }}>
          ... 생략
        </Select>
      )}
    </>
  );
};