자바스크립트 query select 질문 혹시 가능할까요?

자바스크립트 query select 질문 혹시 가능할까요?

QA

자바스크립트 query select 질문 혹시 가능할까요?

본문

import React, {useState} from 'react';

import './reset.css'

import './common.scss'

import './login.scss'

import Footer from "./Footer"

 

const form = document.querySelector(".js-form"),

      input = form.querySelector("input"),

      gretting = document.querySelector(".js-grettings")

 

    const USER_ID = "currentUser",

          showing_cn = "showing"

 

    function saveName(text) {

        localStorage.setItem(USER_ID, text);

    }

 

    function askForName() {

        form.classList.add(showing_cn);

        form.addEventListener("submit",handleSubmit)

    }

 

    function handleSubmit(event) {

        event.preventDefault();

        const currentValue = input.value;

        paintGretting(currentValue);

        saveName(currentValue);

    }

 

    function paintGretting(text) {

        form.classList.remove(showing_cn);

        gretting.classList.add(showing_cn);

        gretting.innerText = `${text} 님 반갑습니다`

    }

 

function loadName() {

    let currentUser = localStorage.getItem(USER_ID);

    if (currentUser === null) {

        askForName();

    } else {

        paintGretting(currentUser);

    }

}

 

function init() {

    loadName();

}

 

init();

 

function AskForm(){

    return(

        <div className="wrap">

         <h4 class="js-grettings grettings"></h4>

         <form class="js-form form">

          <input type="text" placeholder="사용 할 닉네임을 적어주세요."/>

         </form>

          <ul className="point_nav">

           <li></li>

           <li></li>

         </ul>

         <Footer></Footer>

        </div>

    )

}

 

export default AskForm;

 

현재 코드가 이런데 

 

TypeError: Cannot read property 'querySelector' of null

 

이 오류가 나는 이유가 뭘까요..? 

이 질문에 댓글 쓰기 :

답변 1

제가 보기에는

document.querySelector(".js-form") 여기서 널값이 반환되어서

변수 input에 null이 들어가는것 같네요

input이 null인데 querySelector를 해서 나오는 에러입니다.

 

null이 들어가는 이유는 폼이 렌더링 되기전이라서 querySelector를 해도 오브젝트를 찾을수 없기 때문입니다.

렌더링 되고난후 실행되는 useEffect를 쓰셔야합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,123 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT