모던 리액트7 react onkeydown에서 preventDefault 에러 사용자가 enter 입력했을 때 form submit하는 함수를 호출하는데 preventDefault 부분에서 계속 에러 발생... 해결책을 생각해보았다. 1. 로그인 버튼을 클릭했을 때는 오류 없음, 엔터 눌렀을 때만 오류 발생 2. 엔터 누르고 console.log 이벤트 찍어봄 -> undefined 3. 넘어오는 이벤트가 없는 것으로 추정.. -> 함수호출 할 때 이벤트도 같이 넘겨준다면..? 4. 해결 !!!!!!! const onSubmitHandler = (e) => { e.preventDefault() axios({ method: "POST", url: "http://115.85.180.7:8000/auth/login/", data: { username: id, userpass: pw, }.. 2023. 2. 1. 6. input 상태 관리 input 태그의 value 값도 설정해주는 것이 중요 -> 상태가 바뀌었을 때 input 내용도 업데이트 InputSample.js import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export default InputSample; 여러개의 input 상태 관리하기 - 여러개의 useState와 onChange로 구현하는 것보다 input에 name 설정.. 2023. 1. 18. 5. useState 함수형 컴포넌트에서 Hooks 기능을 통해 상태를 관리할 수 있음 함수형 업데이트 - setNumber를 사용할 때 값을 업데이트 하는 함수를 파라미터로 넣어줌 - 최적화로 어떤 관련이 있는지 다음 시간에.. Counter.js import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber - 1); } return ( {number} +1 -1 ); .. 2023. 1. 18. 4. 조건부 렌더링 특정 조건에 따라 다른 결과물을 렌더링 가장 기본적인 방법은 삼항연산자 사용하는 것 단순히 특정 조건이 true이면 보여주고 그렇지 않다면 숨겨줄 때는 && 연산자를 사용하는 것이 더 간편함 App.js - props 이름만 작성하고 값 설정을 생략한다면 true로 설정한 것으로 간주 isSpecial={true}와 isSpecial은 같 import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; Hello.js - isSpecial값이 true이면 *를 그렇지 않다면 *null을 보여주도록 함 *JSX에서 null,.. 2023. 1. 18. 3. props props를 통해 컴포넌트에게 값 전달하기 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js - 비구조화 할당 문법을 사용해 코드를 간결하게 작성 import React from 'react'; function Hello({ color, name }) { return 안녕하세요 {name} } export default Hello; defaultProps로 기본값 설정 Hello.js import React from 'react'; function Hello({ color, name }) { return 안녕하세요 {name} } Hel.. 2023. 1. 18. 이전 1 2 다음 반응형
