CodeIt_Sprint/React_초급19 (7)React_초급_JSX 문법4 : 커스텀 태그 만들기, 컴포넌트 만들기 ● 외부 JS코드의 변수에 태그를 저장한 후, => render() 매개인자 내의 JSX 코드에 사용하기○ Ex1_ 태그를 저장한 후, render메소드에 넣어 출력해보기import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));const element = 시발련아 //태그 + 태그.textContent 직접 저장console.log(element) // console.log로 출력하면, 태그내용값이 아닌 객체가 출력된다.root.render( element); - Console 출력장면 : ○ 커스텀 태그 :★Ex2_ 외부 JS에 태그를 반환하는 function 초기화.. 2024. 11. 21. (6)React_초급_JSX 문법3 : JSX코드에 JS변수, 함수하기 ● render() 매개인자 내의 JSX 코드에서 JavaScript 변수를 사용하기 ○ Ex1_ 태그 내 textContent에 JS 변수 사용 사례 import ReactDOM from 'react-dom/client';const name = '김형준';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( 나는 {name}입니다. ); ○ Ex2_ 태그 내 textContent에 JS 변수의 프로퍼티메소드 사용 사례import ReactDOM from 'react-dom/client';const name = 'Cristiano Ronaldo';const root = ReactDOM.createRo.. 2024. 11. 21. (5)React_초급_JSX 문법2 ● 이전 복습 (render 메소드 매개인자에 작성할 코드 문법) :태그 + textContent는 html 문서처럼 작성한다.class 속성, for 속성 => className, htmlFor 으로 속성, 속성값 대입태그의 이벤트 관련 속성 => 카멜 문법으로 속성 표기 //onClick , onMouseDown ..● 또 다른 render() 의 JSX 코드 작성 문제 :- 문제 : 상속 구조의 여러개의 태그는 작성 가능하지만. 연달아 여러 태그 작성은 불가능 하다.ex_import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( 안녕 시발아 왜 욕.. 2024. 11. 21. (4)React_초급_JSX 문법1 ● 정의 :src폴더 내 js파일 내의 코드로 React 프로젝트를 수정할 때, html작성 문법 + JavaScript작성 문법의 짬뽕 스타일ex_import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(안녕 리액트!);//여기 내에서 작성하는 JSX 문법 ● 주요 차이 :①. 태그내에 class 속성 => className 속성 으로 값 대입import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render.. 2024. 11. 21. 이전 1 2 3 4 5 다음
