인프런 커뮤니티 질문&답변
작성한 질문수
next.js input 태그관련 질문드립니다.
해결된 질문
작성
·
115
0
선생님 보통의 리액트경우 새로고침이 일어나지 않기 때문에 서브밋 됬을시 보통 상태값을 초기화 하지 않는 이상 input값의 value가 원래 남아 있지 않나요?
button 태그때문에 새로고침이 일어난건지 제가 이해한 랜더링 방식과 좀 다른건가요?
답변 2
1
안녕하세요 uphoon님 이정환입니다.
정확히 어떤 상황에 서브밋과 새로고침을 말씀하신건지 모르겠어요 🥲
조금 더 구체적으로 질문 주시면 감사하겠습니다.
아하! 요 부분을 말씀하신거였군요
원래 페이지 이동 후에 <input>의 입력값이 남아있는게 맞습니다. 강의에서 초기화 로직을 따로 처리하는 이유는 새로고침 시에도 <input>에 검색어가 반영되도록 하기 위함이에요!
정리하자면 페이지 이동시의 <input> 입력값 유지가 아닌, 새로고침시에 <input>에 현재 검색어를 반영하기 위함이라고 이해하시면 되겠습니다.
답변 감사합니다. 선생님 너무 감사해요. 강의도 너무 좋습니다. 머릿속으로 아 이게 이해가 안되네 하면 그것을 꼭 알아서 다 설명해주시더라구요 너무 감사합니다 선생님~!!
나중에는 요새 필수로 쓰는 상태관리라이브러리 라던지 aws, zest 같은것도 강의 꼭 내주시면 감사하겠습니다 ㅠㅠ 유익한 강의 감사합니다 선생님
0
안녕하세요, 인프런 AI 인턴입니다. uphoon님, 질문 주셔서 감사합니다.
React에서는 form 태그를 사용하여 데이터를 제출하면 기본적으로 페이지가 새로고침되어 입력값이 초기화되는 특성이 있습니다. 하지만 이러한 문제는 form 태그의 onSubmit 이벤트에서 event.preventDefault()를 사용하여 기본 새로고침 동작을 막음으로써 해결할 수 있습니다.
다음과 같은 예시 코드로 문제를 해결할 수 있습니다:
import React, { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
// 폼 제출 시 처리할 로직
console.log("Form submitted with value: ", inputValue);
// 상태 초기화를 원할 경우
setInputValue('');
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}
export default MyForm;
여기에서 handleSubmit 함수 내부의 event.preventDefault()는 폼이 전송되어도 페이지가 새로고침되지 않도록 합니다. 그럼에도 불구하고 input의 상태 값을 유지하거나 초기화할 수 있는 방법을 제공합니다.
이해를 돕기 위해 유사한 질문과 답변이 있는 게시물을 추천해 드립니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
import { ReactNode, useState } from "react"; import { useRouter } from "next/router"; export default function SearchableLayout({ children, }: { children: ReactNode; }) { const [value, setValue] = useState(""); const router = useRouter(); const onChangeSearch = (event: React.ChangeEvent<HTMLInputElement>) => { setValue(event.target.value); }; const onSubmit = () => { if (!value) return; router.push(`/search?q=${value}`); }; const onKeyDown = () => {}; return ( <div> <input placeholder={"검색어를 입력하세요"} type="text" onChange={onChangeSearch} value={value} /> <button onClick={onSubmit}>검색</button> {children} </div> ); }지금 선생님 강의 페이지별 레이아웃 설정하기 부분인데 선생님께서는 페이지 이동후에 input에 value가 초기화되는것을 따로 로직처리를 해주시는데 저는 이동을해도 value값이 그대로 남아 있더라구요 이게 버전따라서 조금씩 다른건지 개발환경의 차이인건지 궁금합니다.