[Next.js] 시계, input 텍스트 입력시 구글에서 검색되게 만들기

 

오늘은 현재 시간을 실시간으로 나타내주는 시계 기능과,

검색창에 텍스트 입력 후 검색 버튼을 누르면 구글 검색창으로 연동되는 기능을 만들었다.

 

코드가 간단하니 빠르게 가보자.

 

 

완성되면 다음과 같이 동작한다.

 

---

0. Main

 

./pages/Main.tsx

import Clock from "components/main/Clock";
import GoogleSearch from "components/main/GoogleSearch";

const Main = () => {
  return (
    <>
      <GoogleSearch />
      <Clock />
    </>
  );
};

export default Main;

GoogleSearch 컴포넌트와 Clock 컴포넌트를 Main 페이지에 불러온다.

 

 

1. Clock

 

./components/Clock.tsx

import { useState, useEffect } from "react";

const Clock = () => {
  const [time, setTime] = useState(new Date());
  const [isHourTwelve, setIsHourTwelve] = useState<boolean>(true);

  useEffect(() => {
    const id = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="clock">
      <span onClick={() => setIsHourTwelve(!isHourTwelve)}>
        {time.toLocaleTimeString("en-US", {
          hour12: isHourTwelve,
          hour: "2-digit",
          minute: "2-digit",
        })}
      </span>
    </div>
  );
};

export default Clock;

현재 시간을 나타내는 시계를 간단하게 구현했다.

몇가지만 짚고 넘어가보자.

 

- setInterval(code, delay)

주기적으로 업데이트하거나 데이터를 받아와야 할 때 사용하는 함수다.

code에는 일정 시간마다 반복적으로 실행 할 함수를 적는다.

delay에는 반복적으로 실행 할 시간을 적는다. 시간 단위는 ms 이다. ( 1000 => 1초 간격으로 실행 )

 

따라서 위 코드를 해석하면 1초마다 바뀌는 시간을 setTime으로 time 변수의 상태를 변경한다는 뜻이다.

여기서 해당 함수를 사용할 때 주의해야 할 점은 clearInterval() 함수를 사용해서 타이머를 지워야 한다는 것을 기억해야 한다.

그렇지 않으면 메모리 누수가 발생할 수 있기 때문에 주의하길 바란다.

 

참고 : https://developer.mozilla.org/en-US/docs/Web/API/setInterval

setInterval() - Web APIs | MDN

 

---

 

- toLocaleTimeString(locales, options)

날짜의 시간 부분을 언어별로 표현한 문자열을 반환하는 함수다. ( 매개변수는 생락 가능하며 생략할 경우 웹브라우저의 기본 locale 값을 사용한다. )

locales에는 사용할 언어를 입력한다.

options를 통해 반환되는 문자열의 형식을 조정할 수 있다.

 

필자는 AM, PM 형식을 사용하고 싶어서 locales를 "en-US" 로 설정했다. ( "ko-KR" : 한국어 설정으로 오전, 오후로 출력된다. )

 

options에서는 3가지를 설정했는데,

• hour12 : 반환되는 문자열을 12시간 또는 24시간으로 설정할 수 있다. ( true : 12:00 AM/PM, false : 24:00 )
• hour : 반환되는 시간을 설정할 수 있다. ( "numeric" : 1, "2-digit" : 01 )
• minute : 반환되는 분을 설정할 수 있다. ( "numeric" : 1, "2-digit" : 01 )

필자는 second 까지는 출력하지 않기 때문에 options에 입력하지 않았다. 필요한 사람들은 추가해주면 된다.

 

참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

Date.prototype.toLocaleTimeString() - JavaScript | MDN

 

---

 

- onClick={() => setIsHourTwelve(!isHourTwelve)}

반환되는 문자열 형식을 바꾸는 기능을 넣고싶어 일단 간단하게 시간을 클릭하면 형식이 바뀌도록 만들어놨다.

추후에 변경하는 버튼을 만들 예정이다.

 

 

2. GoogleSearch

 

./components/GoogleSearch.tsx

import { useRef, useEffect } from "react";

const GoogleSearch = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.value = "";
    }
  }, []);

  return (
    <div className="search-bar">
      <form method="get" action="http://www.google.co.kr/search">
        <input ref={inputRef} type="text" name="q" />
        <input type="submit" value="검색" />
      </form>
    </div>
  );
};

export default GoogleSearch;

- <form method="get" action="http://www.google.co.kr/search">

method : 서버에 전송할 http 메소드를 설정한다. (get, post)

action : 데이터가 전송될 url을 설정한다.

 

필자와 같은 실수를 막기 위해 먼저 주의할 점을 말하자면 <input> 태그의 name="q" 속성을 꼭 넣어줘야 한다.

 

사실 처음에는 <input> 태그의 name="q" 속성을 넣어줘야 하는것을 몰랐다.

그래서 불필요한 속성이라고 생각하고 지우고 실행했더니 <input> 태그에 입력한 텍스트가 검색이 되지 않았다.

초반에는 안되는 원인이 뭔지 몰라서 한참을 삽질했다...😂

 

리액트를 검색하려 했지만 action으로 설정한 주소로만 이동하는..

 

그렇게 한참을 헤매다가 원인을 찾은 후에는 왜 <input> 태그에 name="q" 속성을 입력해줘야 하는지 궁금해졌다.

이유는 다음과 같았다.

name 속성은 <form> 태그의 action 속성으로 전달되는 페이지의 파라미터로 사용되기 때문이다.

name 속성은 key, <input> 태그에 입력되는 텍스트는 value로 말이다.

글로 설명하니 무슨말인지 모르겠다. 예를 들어서 살펴보자.

 

---

필자는 '리액트'라는 텍스트를 검색하고 싶다. 과정은 다음과 같다.

 

1. <input type="text" name"q" />

입력창에 '리액트'라고 입력을 한 후 엔터를 치거나 검색 버튼을 누른다.

 

2. <form method="get" action="http://www.google.co.kr/search">

페이지가 submit 되면서 GET 방식을 통해 URL 주소 끝에 파라미터로 포함되어 request(요청)한다.

1번을 바탕으로 우리는 파라미터 값이 {key: "q", value: "리액트"}으로 전송된다.

 

3. "https://www.google.co.kr/search?q=리액트"

마지막으로 위와 같이 우리가 보낸 파라미터 값이 포함된 url 주소를 response(응답) 받는다.

 

---

 

이처럼 정말 간단한 코드인데 무지하여 애를 먹었다. 독자분들은 필자와 같은 실수를 하지 않기를 바란다.😁

 

 

---

마치며

오늘은 간단하게 시계, 구글 검색 기능을 만들어봤다.

이번 글을 쓰면서 서버에 대한 지식이 많이 부족하다는 것을 느꼈다. 프론트엔드 개발자가 되려면 서버와 같은 백엔드 지식도 필요하다는 것을 다시금 느꼈다.

이번 프로젝트는 api, 데이터베이스 등을 다룰 예정이기 때문에 조만간 글로 다루겠다.

 

※

해당 블로그는 개인적으로 작성한 코드를 정리 및 복습을 목적으로 글을 작성하고 있습니다.

글에서 잘못된 부분이나 오타가 있다면 댓글로 알려주세요 :)

부족한 부분이 있더라도 너그럽게 이해해주시면 감사하겠습니다. 🙇‍♂️