초기화 1번 인풋 값 : {one}, 2번 인풋 값 : {two}, 3번 인풋 값 : {three} 위와같은경우 인풋 각각 state 를 줘서 처리할 수도 있지만 아래와 같은 방법이 더 효율적이다. 우선 위와같이 각 인풋에 name 값을 주고 고유의 이름을 붙여 준다. 그리고 const [inputs, setInputs] = useState({ one: "", two: "", three: "" }); const { one, two, three } = inputs; useState를 각 이름별로 객체로 설정한뒤, 구조분해할당으로 각 값을 꺼낸다. 이후 맨 위처럼 input 의 value에 각 state를 넣어주고 onChange 이벤트를 설정해준다. 인풋이 하나만 있을때는 event.target.value..
useInput 함수를 통하여 제어하는 예제. https://youtu.be/s6KmBH1Ew4Q 글자수 제한. const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = event => { const {target:{value}} = event; //const value = event.target.value 와 같음 let willUpdate = true; if(typeof validator === "function"){ willUpdate = validator(value) } if(willUpdate){ setValue(value) } }; return {..
우선 create-react-app 을 하여 설치한 후 npm add react-router-dom 으로 리액트라우터를 설치한다. src 디렉토리에 index.js에 import { BrowserRouter } from "react-router-dom"; **브라우저라우터는 히스토리 api를 이용해서 실행된다. 를 임폴트 해준뒤 App 컴포넌트를 감싸준다. 이후 실습으로 Home.js 와 About.js 를 만들어 각각의 페이지를 구성해 준다. App.js 로 가서 import { Route } from "react-router-dom"; //임폴트 해줌 function App() { return ( //path 는 주소를 나타내며, component는 그 주소에 보여질 컴포넌트를 의미한다 ); } 위와..
import React, { useState, useEffect } from 'react'; function App() { const [number, setNumber] = useState(0) const onclicked = () => { setNumber(number + 1) } useEffect(()=>{ console.log('값이 바뀜') }, [number]) return ( {number} +1 ) } export default App; 위와 같이 작성했을때(카운터 예제에 useEffect만 추가함) useEffect는 변화를 캐치하는 놈이며 첫번째 파라미터 자리에는 실행하고싶은 함수를 넣어주면 되고 두번째 파라미터에는 빈 배열을 넣어준다(이놈은 deps 임). 기본적으로 빈 배열일 경우 첫..