이것저것 기록장

DOM 요소에만 이벤트 설정이 가능하다. 직접 만든 리액트 컴포넌트에는 이벤트를 자체적으로 설정할수없다. 등 DOM요소에만 이벤트 적용 가능하다. // 이렇게 사용하지 못한다. {console.log("test");}} /> onClick onChange onKeyDown , onKeyUp , onKeyPress (키보드 입력이 일어났을때) onDoubleClick (element 더블클릭했을때) onFocus (element 에 focus될때) onBlur (element 가 focus 잃었을때) onSubmit (form element에서 submit 했을때)

Router 사용법 Router 로 url 경로를 설정할수있다. 위에서 부터 거르고 걸려져 404 에러페이지로 보내버리는 형태로 자주 쓰임 version 5 기준으로 switch가 쓰임 → version 6 기준으로 routes가 대신 쓰임 exact path=”” 를 쓰면 정확한 경로로 설정 *주의점 ⇒ 코드가 위에서부터 읽히기 때문에 만약에 아래와 같은 코드에 exact를 붙이지 않으면 모든 페이지가 home으로 보내지는 현상이 발생함 따라서, 코드를 작성할때 exact를 붙이지 않는것을 고려할때는 걸러지는 순서를 예상하여서 코드를 위에서부터 써내려가야한다. function App() { return ( ); } 새창으로 넘어가지 않고 링크 이동시기는 방법 Link 이용하기 import { Link ..

버튼 2개를 만들어서 각 버튼마다 다른 내용이 뜨게 만들고싶은 컨셉 import { useState } from "react"; import "./styles.css"; const content = [ { tab: "section 1", content: "I'm the content of the section 1" }, { tab: "section 2", content: "I'm the content of the section 2" } ]; const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = u..

react hook의 역사 훅의 역사는 reccmpose에서 시작되었다. recompose 라이브러리(지금의 함수형 컴포넌트, state와 흡사) 는 리액트 팀에 의해 인수됨. input 안에 많은 실행조건 넣는 방법 예를들어 input 의 태그 안에 입력값을 띄어주고, 입력 기본값을 지정해주고, 입력값의 길이를 제한해주는 등의 기능들을 넣고 싶다고 하자. —> 1. 한 변수 안에 useInput을 정의해준다. ex) const name = useInput("mr.", maxvalue); 만약 useInput 을 내가 직접 만들때, useInput의 받은 인자로 무엇을 실핼시킬수있는지 고려해야한다. 위의 예시로는 첫번째로 받은 인자 "mr. " 로 기본값을 지정할것이고, 두번째로 ..