230105 TIL 페이지이동시 스크롤맨위로, Input Enter키

오늘은 뼈대 작업을 완료했다!

아직 로그인, 회원가입 유효성검사가 완성되지않았다.

메인페이지에서 get하는 것은 잘 되었지만, 인피니트스크롤이 정상적으로 작동하지않아서 내일 백엔드 분과 이야기해볼 예정이다.

 

오늘 작업한 것들 중 2개를 남겨보려고한다. 시간이되면 다 남기고 싶은데 워낙 모르는게 많아 다 남기려면 하루종일 걸려서 마지막 쯤 했던 것들로 남긴다.

 

먼저 페이지 이동시 스크롤이 맨 위로 가게 하는 코드이다.

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

const Page = () => {
  //페이지 이동 시 스크롤바 상단으로 이동
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
}

잘 작동된다!

 

두번째로 Input태그에서 Enter키가 입력되도록 하는 것이다.

const MainPage = () => {
  //검색키워드 State
  const [searchKey, setSearchKey] = useState('');
  //input값 onChange함수
  const searchKeyChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchKey(e.target.value);
  };
  //검색함수
  const searchHandler = (searchKey: string) => {
    if (searchKey === '') {
      alert('검색할 키워드를 입력해주세요!');
      return;
    }
    alert('키워드 입력 시 검색기능 작성');
    alert(searchKey);
  };
  //엔터키 인식
  const keyPressHandler = (e: React.KeyboardEvent<HTMLElement>) => {
    if (e.key === 'Enter') {
      searchHandler(searchKey);
    }
  };

  return (
    <Wrap>
      <Input
        placeholder="검색어를 입력하세요"
        onChange={searchKeyChangeHandler}
        onKeyPress={keyPressHandler}
      />
      <SearchIcon
        onClick={() => {
          searchHandler(searchKey);
        }}
        src={searchIcon}
        alt="돋보기아이콘"
      />
    </Wrap>
  );
};

이것도 잘 작동된다!