[크롬 시작화면] 2일차: 검색창 구현하기

프로젝트 명: 나만의 크롬 시작 화면
작업 기간: 2024.06.05 ~ (진행 중)
사용 스킬: TypeScript, React
Github Repository: https://github.com/Rayched/MyChrome_custom_page

---

1. 작업 내용

이번에는 크롬 시작화면의 검색창을 구현하는 작업을 진행하였다.

먼저 'SearchBar.tsx' 파일을 생성하고, 본격적으로 검색창 Component의 구현을 시작하였다.

---

① 검색어를 Console에 출력하기

완성물 예시

상단의 이미지는 작년에 개발을 완료하고, 현재 사용 중인 크롬 시작화면의 검색창이다.

 

기본적인 알고리즘은 검색창에 검색어를 입력하고, 키보드의 Enter 키를 누르면

해당 검색어에 대한 구글 검색 결과를 보여주는 식이다.

 

이를 구현하려면 제일 먼저 검색창, Input 요소에 입력한 텍스트를 참조할 수 있어야 한다.

Input 요소에 입력한 텍스트를 SearchBar 함수에서 참조하는데

문제가 없는 지를 확인하기 위해서, 입력한 텍스트를 Console에 출력하는 코드를 작성해 봤다.

import { useState } from "react";

function SearchBar(){
    const [Keyword, setKeyword] = useState("");

    const getKeywords = (event: any) => {
        setKeyword(event.target.value);
        console.log(Keyword)
    }

    return (
        <div>
            <input 
                type="text" 
                placeholder="검색어를 입력해주세요."
                value={Keyword}
                onChange={getKeywords}
             />
        </div>
    );
}

Input 요소에 텍스트를 입력하면 onChange Event가 발생, getKeywords 함수가 실행된다.

그리고 getKeyword 함수는 Input 요소에 입력한 텍스트를 setKeyword() 함수를 통해서

이를 state에 저장하고, state에 저장된 문자열 값을 console에 출력시킨다.

 

검색창에 입력한 텍스트를 함수 SearchBar에서 참조할 수 있게 하는 코드의 작성을 완료하였다.

---

② Enterkey를 누르면, 검색어에 대한 구글 검색 결과를 보여주기

(1). Input에 onKeyDown Event 추가

이제 검색어를 입력하고, EnterKey를 누르면 구글 검색 결과로 넘어가야 한다.

 

검색창 컴포넌트에서 키보드 Enter 키를 누르면, 특정 함수를 실행시키기 위해서

onKeyPress Event를 검색창 컴포넌트에 추가하려고 했는데

아래 이미지처럼 해당 Event에 취소선이 그어져 있었다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event

Element: keypress event - Web APIs | MDN

 

Keypress와 관련된 공식 문서를 확인해 보니, 더 이상 사용이 권장되지 않는다고 한다.

 

공식문서에 keypress를 대체하는 기능으로 KeyDown이 있다고 한다.

onKeyPress를 onKeyDown Event로 수정하고

Enter 키를 눌렀을 때 실행시킬 함수 EnterKeys를 아래와 같이 작성하였다.

import { KeyboardEvent, useState } from "react";

function SearchBar(){
    const [Keyword, setKeyword] = useState("");

    const getKeywords = (event: any) => {
        setKeyword(event.target.value);
    }

    const EnterKeys = (event: KeyboardEvent) => {
        if (event.code === "Enter"){
            console.log(Keyword);
            setKeyword("");
        }
    }

    return (
        <div>
            <input 
                type="text"
                placeholder="검색어를 입력해주세요."
                value={Keyword}
                onChange={getKeywords}
                onKeyDown={EnterKeys}
            />
        </div>
    );
}

 

 

onKeyDown Event를 통해서 검색어를 입력한 상태에서 Enter 키를 누르면

입력한 검색어가 console에 출력되는 것을 확인하였다.

 

위의 과정을 통해서 EnterKeys 함수가 문제없이 실행되는 것을 확인했으니

이제 Enter 키를 눌렀을 때 console 출력 대신, 구글 검색 결과로 넘어가는 기능으로 업데이트해보자.

 

검색 결과를 보여주는 역할을 하는 ShowResult 함수를 추가하고

Enter 키를 눌렀을 때 실행되는 EnterKeys에서, ShowResult를 호출하도록 코드를 수정하였다.

import { KeyboardEvent, useState } from "react";

function SearchBar(){
    const [Keyword, setKeyword] = useState("");

    const getKeywords = (event: any) => {
        setKeyword(event.target.value);
    }

    //New
    const ShowResult = () => {
        let SearchWord = Keyword;
        window.location.href=`https://www.google.com/search?q=${SearchWord}&sourceid=chrome&ie=UTF-8`;
    }

    const EnterKeys = (event: KeyboardEvent) => {
        if (event.code === "Enter"){
            ShowResult();
            setKeyword("");
        }
    }

    return (
        <div>
            <input 
                type="text"
                placeholder="검색어를 입력해주세요."
                value={Keyword}
                onChange={getKeywords}
                onKeyDown={EnterKeys}
            />
        </div>
    );
}

 

 

window.location.href="url";
//현재 창에서 명시해둔 주소로 이동한다.

---

③ getKeyword() 함수의 'event' Type 지정하기

 

예전에 검색창을 구현하는 작업을 진행할 때, Input 요소에 입력된 텍스트를 state에 저장하기 위해서

아래와 같이 getKeyword 함수를 만든 적이 있었는데 이때 event의 type을 어떻게 해야할 지 몰라서

임시로 'any' 타입으로 지정하고 넘어간 적이 있었다.

 

그 상태로 며칠 정도를 방치하다가, 오늘 React 강의의 event의 타입과 관련된 내용을 수강하게 됐고

생각난 김에 예전에 임시로 'any'로 지정한 event의 타입을 찾아보기 위해서 구글링을 시도하였다.

 

대략 5분 만에 바로 event의 적절한 타입을 찾을 수 있었고

이를 getKeyword 함수의 event의 타입으로 지정해보니 Error가 발생하지 않고

검색창이 정상적으로 동작하는 것도 확인했기에 이 방법을 블로그에 기록으로 남겨두기로 했다.

 

//SearchBar.tsx

const getKeywords = (event: React.ChangeEvent<HTMLInputElement>) => {
        setKeyword(event.target.value);
}

//Before 
//event: any (임시 설정)

//After
//event: React.ChangeEvent<HTMLInputElement>

 

Type의 개수가 많기 때문에, 전부 다 외우는 건 힘들고

결국 현재 사용 중인 event에 적절한 타입을 찾아내는 방법은 구글링 뿐인 것 같다..