handlechange 사용

갑자기 handlechange라는 키워드에 대해서 궁금해졌다.

 

팀원들이 코딩 할때도 그렇고 로그인,회원가입등을 할 때 유독 많이 사용하더라

 

기본적인 사용 방법? 기법이라고도 생각되어지는데

 

이벤트를 관리하는 기법이라고 사용하면될까? 그래서 의아함이 생겨서 두가지 방식을 다 사용해보았다.

 

텍스트 검색창에서

1.handlechange를 사용하지않음

onChange부분을 보면 바로 화살표 함수를 사용해서 useState의 상태를 바로 변화해 사용한다.

onChange={(event)=>{setSearch(event.target.value)}}

 

2.handlechange를 사용함

이와같이 handleChange라는 함수를 상단에 만들어놓고 사용한다.

onChange={handleChange}

   const handleChange = (event) =>{
     setSearch(event.target.value)
   }

이와같은 경우는 상단에 handleChange라는 함수가 만들어져 있어야한다.

 

아래는 전체 소스코드

NavBar.js

import Link from "next/link";
import { useRouter } from "next/router";
import { Container,Row,Col,Navbar,Nav,Dropdown} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import { useEffect, useState } from 'react';
import { off } from "process";

export default function NavBar() {
  const [search,setSearch] = useState('')
  const router = useRouter();  
  const handleChange = (event) =>{
    setSearch(event.target.value)
  }
  return (
    <>
    <Navbar collapseOnSelect expand="lg" bg="bg-white" variant="light">
  <Container>
  <Navbar.Brand ><img src="/logo.png" width={200}/></Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="me-auto">
      {/* 최종 네브바, 반응형 위함 Link안에서 링크는 없애주고 안에넣기 */}
      <Link href="/">
          <a className='navmenu'>카테고리검색 &nbsp;</a>
        </Link>
    <Link href="/index2">
          <a className='navmenu'>키워드검색 &nbsp;</a>
        </Link>

    <Link href="/SearchTextResult">
          <a className='navmenu'>텍스트결과 &nbsp;</a>
        </Link>
        <Link href="/test">
          <a className='navmenu'>AxiosTest &nbsp;</a>
        </Link>      
    </Nav>
    <Nav>
    {/* <div className="search-container">
    <form action="/SearchTextResult">
      <input type="text" placeholder="라면 텍스트 검색" name="search"></input>
      <button type="submit">검색</button>
    </form>
  </div> */}
  <div className="searchform">
  <TextField
          id="standard-search"
          label="라면검색"
          defaultValue={search}
          type="search"
          variant="standard"
          color="warning"
          onChange={handleChange}
          // onChange={(event)=>{setSearch(event.target.value)}}
          onKeyPress={
            (e)=>{
              if(e.key==='Enter'){
                router.push(
                  {
                  pathname: '/SearchTextResult',
                  query: { 
                    "textResult":search,
      
                   },
                },
                `/SearchTextResult`
                )
              }
            }
          }
        />
         <IconButton type="submit" sx={{ p: '10px' }} aria-label="search" onClick={()=>{
           router.push(
            {
            pathname: '/SearchTextResult',
            query: { 
              "textResult":search,

             },
          },
          `/SearchTextResult`
          )
         }}>
        <SearchIcon />
      </IconButton>
  </div>
    
    <Dropdown>
  <Dropdown.Toggle variant="" id="dropdown-basic">
  <FontAwesomeIcon icon={faUser} /> 회원메뉴
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">로그인 / 로그아웃</Dropdown.Item>
    <Dropdown.Item href="#/action-2">회원가입</Dropdown.Item>
    <Dropdown.Item href="#/action-3">마이페이지</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>
    </Nav>
  </Navbar.Collapse>
  </Container>
</Navbar>

<style jsx>{`
        .navmenu {
          color:grey;
          text-decoration-line: none;
          font-size:20px;
          display:inline-block;
          
        }
        .searchform{
          width:250px;
        }
        
        
        
      `}</style>
    </>

  );
}

---

로그인,회원가입같은걸 관리하는경우 이와같이 사용하는게 매우 편해보인다!

 

ps->03.27기준으로 생각해보니 매우 당연한 사용방법.. 왜갑자기 의아해 했는지 나 자신도 의문스럽다

 

 

참고한 링크

https://ko.reactjs.org/docs/forms.html

폼 – React

https://velopert.com/3634

누구든지 하는 리액트 6편: input 상태 관리하기 | VELOPERT.LOG