728x90 반응형 React30 [React]local Storage를 통한 데이터 유지 count를 localStorage에 저장해볼 것이다. 클릭을 할 때 마다 노란색 형광펜 친 부분의 숫자가 올라가는데 이걸 local Storage에 담아볼 것이다. 우선 App 컴포넌트에서 localStorage.setItem("counter,nextCounter);를 해준다. 근데 저 MeaningsLand 옆에 숫자는 useState를 이용해서 1 씩 증가하는것을 만들어봤었는데 이걸 local Storage 와 연동해볼 것이다. React.useState가 현재 1로 되어있는데 이걸 React.useState(localStorge.getItem("counter");로 바꿔볼 것이다. 이렇게 하면 localStorage에 들어있는 counter 수만큼 숫자가 반영되어 새로고침하지 않고 데이터가 유지된.. 2022. 4. 1. [React] Event 이 글은 노마드코더님의 리액트js 강의를 듣고 개인공부 정리용으로 쓴 글입니다. 리액트로 버튼을 하나 생성해볼것이다. React.createElement를 하면되는데 프로퍼티를 주고 싶지 않으면 null 이라고 해도 된다. 현재 코드가 이런 상황인데 span과 btn을 함께 render하고 싶으면 어떻게 해야할까? div를 만들어서 거기에 두개를 같이 담아줄 것이다. React.createElement ( component ,property,childeren)꼴이기에 span과 btn을 array에 담아줄거다. ++) 두가지 엘리먼트를 하나의 엘리먼트에 담아주고 싶을 때 --> 배열 사용할 것 이제 button에 addEventListener를 붙여볼건데 리액트에는 property에 eventListen.. 2022. 4. 1. [React] 왜 React일까? React는 간단한 코드로 ui를 interactive하게 만들어준다. 버튼을 클릭한 횟수를 html 파일에 띄어주는 프로그램을 만들어볼 것이다. 바닐라 js로 코드를 짜면 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Total clicks:0 Click me let counter = 0; const button = document.getElementById("btn"); const span = document.querySelector("span"); function handleClick() { counter = counter + 1; console.log(counter); span.innerText = `Total clicks :.. 2022. 4. 1. [React] 폼 검증하기 사용자가 폼에 적합한 텍스트를 입력하고 있는지 확인하기 위해서 폼을 검증해야한다. 영어대사를 입력해야하는데 한국어를 입력했을 때 --> 한국어를 입력할 수없다는 경고 메세지가 필요하다. 한글이 입력되는지 확인하는 함수인 includesHangul함수를 form 컴포넌트에 넣고 console.log 해보면 한글이 입력됐을 때 false가 반환된다. 한글이 입력됐을 때 경고창이 떠야하기 때문에 useState를 이용해볼것이다. 에러가 발생하면 에러메세지가 뜨게 상태가 변경되어야 하기 때문에 useState를 사용하고 setErrorMessage 함수에 "한글은 입력할 수 없습니다"를 넣어준다. 그리고 이 form 컴포넌트를 return 할때 error 메세지를 넣어주면 하지만 여기서 문제점이 있는데 만약 b.. 2022. 4. 1. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
