본문 바로가기
반응형

javascript13

[React] Warning: Encountered two children with the same key 오류 해결 방법 🚨 Chrome 개발자 도구에서 발생한 에러 메시지Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.❓에러 발생 이유React는 React 엘리먼트를 렌더링 할 때 Diffing이라는 작업을 진행합니다.그러기 위해서는 유니크한 Key 값이 필요합니다.하지만, 유니크한 Ke.. 2024. 10. 11.
알기 쉽게 정리한 JSX란? JSX란?JavaScript에 HTML 태그를 끼얹은 문법HTML 태그 안에선 중괄호({})를 사용해서 JS를 쓸 수 있다.JavaScript의 공식 문법이 아니며, JavaScript의 확장 문법이다.아래와 같이 JavaScript 문법 (const title)에HTML () 태그를 끼얹은 JavaScript의 확장 문법입니다.const count = 1;const title = {count}번째 게시물 리액트 엘리먼트란? 예시 코드const count = 1;const title = {count}번째 게시물 위 title 변수에 담은 태그는 리액트 엘리먼트라고 부릅니다. 즉, 리액트에서 UI를 렌더링 하기 위한 가장 작은 단위입니다. 참고로  브라우저는 JSX 문법을 알지 못합니다.그렇기 때문에 아.. 2024. 10. 8.
[React] 실시간으로 input 값을 숫자만 입력 받는 방법 다음 예제를 통해 실시간으로 input 값을 어떻게 숫자만 입력받을 수 있는지 살펴봅시다.다음은 HTML의 Form과 input을 사용해서 상품 코드를 숫자만 입력 받는 관리자 페이지입니다. 요구 사항상품 코드는 숫자로만 이루어져 있습니다.상품 코드를 입력하는 도중에 숫자가 아닌 문자를 입력하면 input 요소 밑에 error 메시지를 나타내며, '등록' 버튼을 비활성화 합니다.상품 코드를 정상적으로 등록하면 "상품 코드가 등록되었습니다."라는 메시지와 등록된 상품 코드를 나타냅니다. 1. HTML 구조 설계div (Form)forminput / buttondiv (Modal)divspan / p컴포넌트는 상품 코드를 입력할 수 있는 form 컴포넌트, 안내 메시지를 보여주는 modal 컴포넌트를 사용합.. 2024. 10. 3.
[React] input 소문자를 대문자로 변환하는 방법 다음 예제를 통해 input 값을 어떻게 대문자만 입력받을 수 있는지 살펴봅시다.다음은 HTML의 Form과 input을 사용해서 대문자만 입력받는 페이지입니다. 1. HTML 구조 설계divforminput / buttonJSX 문법 특성상 최상위 요소는 태그를 사용합니다.그리고 명확하게 하기 위해 시맨틱 태그인 요소를 사용합니다.그 안에 input 요소와 button 요소를 사용하여 HTML 구조를 설계합니다.아래 그림을 참고해 주세요.  생성  2. state 변수 추가input의 value 값을 관리하는 state 변수를 추가합니다.const [value, setValue] = useState(""); 3. handleInputChange 함수 개발handleInputChan.. 2024. 10. 2.
반응형