onSubmit 이벤트가 예상치 않게 작동하는 경우: form 안의 버튼은 무조건 on submit이 작동함(form 제출됨) 

    
 React에서 `onSubmit` 이벤트가 예상치 않게 작동하는 경우는 여러 가지가 있을 수 있습니다. 코드를 보면, `onSubmit` 핸들러는 `form` 태그에 바인딩되어 있어서, "Submit" 버튼을 클릭하면 `makeCrossWord` 함수가 호출되어야 합니다. 하지만, 어떤 상황에서는 사용자가 "Submit" 버튼을 클릭하지 않았음에도 불구하고 이 함수가 호출되는 것처럼 보일 수 있는데, 그 원인 중 일부를 살펴보겠습니다:

1. **버튼의 기본 타입**: HTML에서 `<button>` 태그의 기본 `type`은 `submit`입니다. 이는 `<button>`이 `form` 내에 있을 때, 클릭되면 `form`의 `onSubmit` 이벤트를 발생시킨다는 것을 의미합니다. 코드 내에 "목록 보이기" 옆에 있는 추가 버튼(`<button onClick={...}>+</button>`)에 `type="button"`을 명시적으로 추가하지 않으면, 이 버튼이 클릭될 때도 `form`이 제출될 수 있습니다. 이를 해결하기 위해, 해당 버튼에 `type="button"`을 추가해 보세요:

   ```jsx
   <button
     type="button"
     onClick={() => {
       setwordLst([...wordlst, ""]);
     }}
   >
     +
   </button>
   ```

2. **이벤트 버블링**: 때때로, 버튼 클릭 이벤트가 상위 DOM 요소로 전파되어 `form`의 `onSubmit`을 실수로 트리거할 수 있습니다. 그러나 이 사례에서는 `e.preventDefault()`가 `onSubmit` 이벤트 핸들러 내부에서 이미 호출되고 있으므로, 이벤트 버블링이 문제가 되지는 않습니다.

3. **컴포넌트 상태 변화에 의한 렌더링**: React 컴포넌트의 상태가 변할 때마다 컴포넌트는 다시 렌더링됩니다. 여기서 `makeCrossWord` 함수 내부 로직이나 다른 상태 업데이트가 실수로 `onSubmit` 이벤트를 트리거하지 않는지 확인해 보세요. 그러나 코드를 살펴보았을 때, 이런 현상이 발생할 명확한 부분은 보이지 않습니다.

위에서 언급한 첫 번째 원인이 가장 가능성이 높아 보입니다. 추가 버튼에 `type="button"`을 명시적으로 추가해 "Submit" 버튼이 아닌 다른 버튼 클릭 시에 `form`이 제출되지 않도록 하는 것이 중요합니다. React와 HTML에서의 이러한 동작은 때로 의도치 않은 `form` 제출을 발생시킬 수 있으니 주의가 필요합니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

js 스트링에서 요소 갯수 세기

이상하다 https://stackoverflow.com/questions/881085/count-the-number-of-occurrences-of-a-character-in-a-string-in-javascript If you're looking for the commas: (mainStr. split ( "," ). length - 1 ) //3 If you're looking for the str (mainStr. split ( "str" ). length - 1 ) //4   console . log (( "str1,str2,str3,str4" . match ( /,/g ) || []). length ); //logs 3 console . log (( "str1,str2,str3,str4" . match ( new RegExp ( "str" , "g" )) || []). length ); //logs 4
Read more »

STUDY

@GetMapping("/proxy-download") public ResponseEntity<Resource> proxyDownload() {     String sourceUrl = "https://example.com/file-to-download.bin";     ResponseEntity<byte[]> response = restTemplate.exchange(         sourceUrl,         HttpMethod.GET,         null,         byte[].class     );     byte[] fileBytes = response.getBody();     // 👉 원본 Content-Disposition 헤더에서 파일 이름 추출     String disposition = response.getHeaders().getFirst(HttpHeaders.CONTENT_DISPOSITION);     String filename = "default.bin"; // fallback     if (disposition != null && disposition.contains("filename=")) {         // Content-Disposition: attachment; filename="some_file.bin"         filename = disposition.split("filename=")[1].replace("\"", "").trim();     }     HttpHeaders ...
Read more »

javascript cheatsheet

JavaScript 기능들을 정리한 치트시트를 제공합니다. 이 치트시트는 데이터 구조와 알고리즘을 구현하는 데 필요한 기본적인 구문과 기능을 포함하고 있습니다. ## JavaScript Coding Cheat Sheet ### 1. **기본 문법** #### 변수 선언 ```javascript let variable = value;   // 변수 선언 (변경 가능) const constant = value; // 상수 선언 (변경 불가) ``` #### 함수 선언 ```javascript // 함수 선언식 function functionName(params) {   // 함수 내용 } // 함수 표현식 const functionName = function(params) {   // 함수 내용 }; // 화살표 함수 const functionName = (params) => {   // 함수 내용 }; ``` ### 2. **기본 데이터 구조** #### 배열 (Array) ```javascript let arr = [1, 2, 3]; // 배열 길이 console.log(arr.length); // 배열 요소 접근 console.log(arr[0]); // 배열의 끝에 추가 arr.push(4); // 배열의 끝에서 제거 arr.pop(); // 배열의 앞에 추가 arr.unshift(0); // 배열의 앞에서 제거 arr.shift(); ``` #### 객체 (Object) ```javascript let obj = {   key1: 'value1',   key2: 'value2' }; // 속성 접근 console.log(obj.key1); // 속성 추가 또는 변경 obj.key3 = 'value3'; // 속성 제거 delete obj.key2; ``` ### 3. **반복문 및 조건문** #### 반복문 ```javascript // for 반복문 for (let i = 0; i ...
Read more »