인프런 커뮤니티 질문&답변

br님의 프로필 이미지

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

오류 이건 뭔가요???

22.08.15 22:03 작성

·

740

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관react-dom.development.js:18687
 
-인터넷창 오류- The above error occurred in the <input> component: at input at form at div at RegisterPage (http://localhost:3000/static/js/bundle.js:660:76) at Route (http://localhost:3000/static/js/bundle.js:46282:29) at Switch (http://localhost:3000/static/js/bundle.js:46484:29) at div at Router (http://localhost:3000/static/js/bundle.js:45901:30) at BrowserRouter (http://localhost:3000/static/js/bundle.js:45522:35) at App at Provider (http://localhost:3000/static/js/bundle.js:42903:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 react-dom.development.js:26923
Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. at assertValidProps (react-dom.development.js:2942:1) at setInitialProperties (react-dom.development.js:9920:1) at finalizeInitialChildren (react-dom.development.js:10950:1) at completeWork (react-dom.development.js:22193:1) at completeUnitOfWork (react-dom.development.js:26596:1) at performUnitOfWork (react-dom.development.js:26568:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at recoverFromConcurrentError (react-dom.development.js:25850:1) at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)련 문의는 1:1 문의하기를 이용해주세요.
 
 
client-src-index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// import 'antd/dist/antd.css'
import { Provider } from 'react-redux';
import { applyMiddleware, createStore} from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import loginReducer from './_reducers';

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider
    store = {createStoreWithMiddleware(
            loginReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
    )}>
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
 
여기 문제 같아 보여요
redux 부분 뭔가 있는거 같은데 모르겠네요
 
loginPage.js
import React, { useState } from 'react';
import {useDispatch} from 'react-redux';
import { loginUser } from '../../../_actions/user_action';

function LoginPage(props) {
    const dispatch = useDispatch();

    const [Email, setEmail] = useState("");
    const [Password, setPassword] = useState("");

    const onEmailHandler = (enent) => {
        setEmail(enent.currentTarget.value)
    }

    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    }

    const onSubmitHandler = (event) => {
        event.preventDefault();

        let body = {
            email: Email,
            password: Password
        }

        dispatch(loginUser(body))
        .then(response => {
            if(response.payload.loginSuccess) {
                props.history.push('/')
            } else {
                alert("Error")
            }  
        })
    }


    return (  
        <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
        }}>
       
        <form style={{desplay: 'flex', flexDirection: 'column'}}
            onSubmit={onSubmitHandler}>

            <input>Email</input>
            <input type="email" value={Email} onChange={onEmailHandler} />
            <label>password</label>
            <input type="password" value={Password} onChange={onPasswordHandler}/>

            <br/>
            <button>
                Login
            </button>

        </form>
        </div>
    );
}


export default LoginPage;
 
RegisterPage.js
import React, { useState } from 'react';
import {useDispatch} from 'react-redux';
import { registerUser } from '../../../_actions/user_action';

function RegisterPage(props) {
    const dispatch = useDispatch();

    const [Email, setEmail] = useState("");
    const [Password, setPassword] = useState("");
    const [Name, setName] = useState("")
    const [ConfirmPassword, setConfirmPassword] = useState("")

    const onEmailHandler = (enent) => {
        setEmail(enent.currentTarget.value)
    }

    const onNameHandler = (event) => {
        setName(event.currentTarget.value)
    }

    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    }

    const onConfirmPasswordHandler = (event) => {
        setConfirmPassword(event.currentTarget.value)
    }

    const onSubmitHandler = (event) => {
        event.preventDefault();

        if(Password !== ConfirmPassword) {
            return alert("비밀번호와 비밀번호 확인은 같아야 합니다.")
        }

        let body = {
            email: Email,
            password: Password,
            name: Name
        }

        dispatch(registerUser(body))
        .then(response => {
            if(response.payload.success) {
                props.history.push("/login")
            } else {
                alert("Failed to sign up")
            }
        })
    }

    return (  
        <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
        }}>
       
        <form style={{desplay: 'flex', flexDirection: 'column'}}
            onSubmit={onSubmitHandler}>

            <input>Email</input>
            <input type="email" value={Email} onChange={onEmailHandler} />
            <label>Name</label>
            <input type="text" value={Name} onChange={onNameHandler}/>
            <label>Password</label>
            <input type="password" value={Password} onChange={onPasswordHandler}/>

            <label>Confirm Password</label>
            <input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler}/>

            <br/>
            <button type='submit'>
                회원 가입
            </button>
        </form>
        </div>
    );
}

export default RegisterPage;

답변

답변을 기다리고 있는 질문이에요
첫번째 답변을 남겨보세요!
br님의 프로필 이미지

작성한 질문수

질문하기