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 임). 기본적으로 빈 배열일 경우 첫..
1. findIndex const imarray = [{text:"aa", id:1}, {text:"bb", id:2}, {text:"cc", id:3}] const index = imarray.findIndex(i => i.text == "bb") //index에 1을 반환 객체가 들어있는 배열에서 배열의 특정 값을 조회하여 찾고 싶을때 쓸 수 있는 함수이다. 인자로 각 배열들을 받아 조건과 부합하면 해당객체의 배열번호를 알려주고(몇번째에 있는지) 만약 값이 배열 안에 존재하지 않는다면 -1을 반환한다. 2. reduce const array = ["a", "b", "c", "d"] const result = array.reduce((a, b, c, d) => {return a + b}, 1) cons..
function deletWord(e){ e.preventDefault(); const span = e.target; const li = span.parentNode; wordList.removeChild(li) const cleanWord = wordListArr.filter(function(element){ return element.id !== parseInt(li.id); }) wordListArr = cleanWord; saveWord() } Todo 리스트를 만들때 리스트 하나하나를 개별적으로 지워야 할때 사용한 filter함수. 배열.filter 로 작성하고 뒤에 콜백함수의 인자(element)로 각 배열들이 들어오고 필터는 들어온 배열과 다른 값을 비교하여 true 이면 유지하고 false..
for(let i = 0; i