오늘 한 일

환경변수 사용법

참고
[공식문서]Basic Features: Environment Variables | Next.js

• dotenv 패키지를 설치할 필요가 없다.
• .env, .env.local, .env.production 등의 파일명으로 환경변수를 작성한다.
• 선언한 환경변수를 브라우저에서 사용하기 위해서는 NEXT_PUBLIC_ 이라는 prefix를 붙여주면 된다.

드랍다운 컴포넌트 리팩토링

커스텀 Select, Option 태그 컴포넌트화 및 state type 변경
기존에는 item state의 타입이 HTMLElement라서 dangerouslysetInnerHTML 속성으로 넣어줬는데... 컴포넌트 초기렌더링에서 defaultValue 값을 이제 넣어줘야하니 드랍다운 컴포넌트의 목록에 있는 div 요소를 사용할 수가 없게 되었다;
그래서 item state는 이제 itemList 배열의 객체로 타입을 바꿨다.

• 커스텀 Option 컴포넌트를 아이콘 이미지가 있는 타입과 없는 타입으로 나누어서 만들었다.

// Dropdown.tsx
const OptionItemWithImage = (props: any) => {
    const { el } = props;
    return (
      <div
        id="item"
        data-id={el.id}
        className="item with-icon"
        onClick={onSelectItem}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <div style={{ display: 'flex' }} data-id={el.id}>
          <img
            src={el.img}
            id="item_name"
            width={18}
            height={18}
            style={{ marginRight: '0.5rem' }}
          />
          <span id="item_name">{el.name}</span>
        </div>
        <img
          src="/svg/check_select.svg"
          ref={selectedMark}
          width={15}
          height={10.5}
          style={{ display: 'none' }}
          className="selected_mark"
        />
      </div>
    );
  };

  const OptionItem = (props: any) => {
    const { el } = props;
    return (
      <div data-id={el.id} className="item" onClick={onSelectItem} id="item">
        <span id="item_name">{el.name}</span>
        <img
          src="/svg/check_select.svg"
          className="selected_mark"
          ref={selectedMark}
          width={15}
          height={10.5}
          id="item_name"
          style={{ display: 'none' }}
        />
      </div>
    );
  };

• defaultValue는 부모 컴포넌트에서 props로 전달받는다.

const CoinInfo = ()=> {
  return (
    <>
      ...
      <Dropdown
              onChange={handleMarket}
              itemList={MarketList.slice(0, 3)}
              placeholder="거래소 선택"
              defaultValue={MarketList.slice(0, 3)[0]} />
      ...
   </>
  )
}

• 처음 컴포넌트 렌더링시 선택된 Select가 있는 경우 useEffect로 Select에 들어갈 item 정보 state를 바꾼다.

/* Dropdown.tsx */
const Dropdown = ({ itemList, placeholder, onChange, defaultValue }: Props) => {
  /* 드랍다운 열린 상태/닫힌 상태 (true/false) */
  const [isActive, setIsActive] = useState<boolean>(false);
  const [item, setItem] = useState<any>(null);
  const onActiveToggle = useCallback(() => {
    setIsActive((prev) => !prev);
  }, []);
  
  useEffect(() => {
    if (defaultValue) {
      setItem(defaultValue);
    }
  }, []);

  
  const onSelectItem = useCallback((e) => {
    const targetId = e.target.id;

    if (targetId === 'item_name') {
      const value = e.target.parentElement.dataset.id;
      setItem(itemList.filter((el) => el.id === value)[0]);
      onChange(value);
    } else if (targetId === 'item') {
      const value = e.target.dataset.id;
      setItem(itemList.filter((el) => el.id === value)[0]);
      onChange(value);
    }
    setIsActive((prev) => !prev);
  }, []);