본문 바로가기

React44

handlechange 사용 갑자기 handlechange라는 키워드에 대해서 궁금해졌다. 팀원들이 코딩 할때도 그렇고 로그인,회원가입등을 할 때 유독 많이 사용하더라 기본적인 사용 방법? 기법이라고도 생각되어지는데 이벤트를 관리하는 기법이라고 사용하면될까? 그래서 의아함이 생겨서 두가지 방식을 다 사용해보았다. 텍스트 검색창에서 1.handlechange를 사용하지않음 onChange부분을 보면 바로 화살표 함수를 사용해서 useState의 상태를 바로 변화해 사용한다. onChange={(event)=>{setSearch(event.target.value)}} 2.handlechange를 사용함 이와같이 handleChange라는 함수를 상단에 만들어놓고 사용한다. onChange={handleChange} const handl.. 2022. 3. 25.

React 페이지네이션 구현하기 (Mui이용) 검색 결과에 따른 리스트를 뱉어내는데, 목록이 10개 이하일 때 도 있고, 100개가 넘을 때 도 있어서 PC나 모바일화면 양쪽에서 편하게 사용하려면 페이지네이션 기능이 필요하다 생각했다. 사진도 넣을거니까 더더욱 필요해짐, Django를 쓸때는 파이썬으로 slice를 사용해서 배열에 원하는 갯수만큼 저장한다음 페이지네이션으로 뱉어내는 형태 였는데 javascript도 마찬가지다. 오랜만이라 삽질을 조금했다. 1. for문을 사용해 처음엔 구현했다. [1,2,3,4,5,6,7,8,9,10,11] 이런식이면 5개씩 저장한다치고 [[1,2,3,4,5], [6,7,8,9,10], [11]] 아래와 같이만든다음 페이지네이션에 집어넣었다. 하지만 매우 비효율적인 방식이란걸 깨닫게 되고... JS에서도 2.slic.. 2022. 3. 25.

엔터키 이벤트(onKeyPress) 혹은 특정키 이벤트 검색창을 만들고 있는데, 버튼클릭(onClick)이벤트 말고도 Enter키로도 작동시키고 싶었다. 적어도 필수라고 생각했다. 나조차도 엔터키로 사용하니까!! 사용한 코드는 아래와 같고, html태그 속성에 onKeyPress={ (e)=>{ if(e.key==='Enter'){ } } 이와같이 사용해주면 된다. 응용해서 다른키도 얼마든지 이벤트 효과를 줄 수 있다. NavBar.js ........ { if(e.key==='Enter'){ router.push( { pathname: '/SearchTextResult', query: { "textResult":search, }, }, `/SearchTextResult` ) } } } /> { router.push( { pathname: '/SearchTe.. 2022. 3. 25.

React className 으로 모달,on and off 만들기 보통 함수형 react부터 공부한 나는 modal이나 on/off 기능을 만든다 치면 useState에 true,false혹은 문자열 상태에따라서 조건문이나 삼항연산자로 만들곤 하는데 오늘 어쩐일인지 css속성을이용해 display:none으로 할 수있냐고 물어보는 팀원이 있었다. 결론은 될거같아서 해봤는데 되더라. App.css .true{ display: inline-block; } .false{ display: none; } 이와같이 클래스명이 true면 보이고 false면 안보이게.. css스타일을주고 App.js import { useEffect, useState } from 'react'; import './App.css'; function App() { let [display,Setdispl.. 2022. 2. 14.

React Css애니메이션(keyframe,건배효과,짠효과) https://flykimjiwon.tistory.com/74 좌우 흔들리는 건배효과 (cheers!) 이 그림을 사용해서 좌우로 흔들리는 건배효과를 만들고싶었다. 채팅창에서 버튼을클릭하면 모든 사용자에게 보여주고 싶었기 때문! 우선 작업을 하는건 둘째치고 기본적인 베이스에서 저그림 flykimjiwon.tistory.com 위와같이 버튼을누르면 모든창에서 짠효과가 발동하게, 건배효과가 발동하게 만들었다. 기본은 html,css 베이스로만들었고 그걸 리액트에 적용시켰다. Cheers.css .ch{ position: relative; animation-name: example; animation-duration: 1s; animation-iteration-count: infinite; /* 이거무제한키워.. 2022. 2. 14.

React Mui 버튼,링크 밑줄없애기 https://stackoverflow.com/questions/37669391/how-to-get-rid-of-underline-for-link-component-of-react-router How to get rid of underline for Link component of React Router? I have the following: How do I get rid of the blue underline? The code is below: Team 1 2022. 2. 11.

이전 1 2 3 4 5 ··· 8 다음

티스토리툴바