JSX (3) 썸네일형 리스트형 [리액트 에러 React Error] Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p> 해결 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트로 개발하다가 만날 수 있는 에러의 해결 방법에 대해 다루겠습니다. Warning: validateDOMNesting(...): cannot appear as a descendant of 해당 에러를 번역하면 이렇습니다. 경고: validateDOMNesting(...): 는 의 하위 항목으로 나타날 수 없습니다 이 에러는 리액트 개발에 사용하는 jsx에서 발생하는데요. 즉, 태그 안에 를 썼거나 태그 안에 또 태그를 썼을 때 해당 에러가 발생하게 됩니다. 이 경우 저는 elements를 감싸고 있는 태그를 찾아서 태그로 변경해주었더니 해결됐습니다. [리액트 React] 리액트 줄바꿈(개행)하기! 뚝딱~! 1. CSS에 해당 내용 추가 .display-enter { white-space: pre-line; } 2.. JS & JSX 작성 (className 보이시죠?) // 생략 const introEx = { 0: `직원의 출퇴근 시간 기록을 실시간 알림으로 받을 수 있고\n 과거부터 현재까지 모든 근무기록을 한눈에 확인할 수 있습니다.`, } // 중간생략 return ( {introEx[0]} ) 3. 결과 [리액트 react] JSX / Fragment 프래그먼트 / JSX에서 자바스크립트 사용법 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 사용되는 JSX, Fragment에 대해 알아보겠습니다. JSX 자바스크립트와 html을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법. html 태그와 속성의 사용법이 거의 같다. JSX에서 'class' 대신에 'className'를 사용해야 한다. : 자바스크립트에서는 객체지향의 개념으로 class를 선언하기 때문에 class를 사용할 수 없다. label 태그에서 사용하는 'for'는 자바스크립트에서 for로 반복문을 쓰기 때문에, JSX에서는 'htmlFor'로 사용한다. 속성명 및 이벤트 핸들러의 이름은 JSX에서는 카멜 케이스로 작성해야 한다. A를 B로 변환 A. B. 예외적으로 HTML에서 비표준..
