전체 글268 (8)React_초급_JSX 문법5 : 컴포넌트 속성지 ● Defalut 상황○ Dice 컴포넌트 (Dice.js)import diceBlue01 from './assets/dice-blue-1.svg'; //Blue 주사위 1 사진 링크function Dice(props){ return ; //Blue 주사위 1 사진의 src 속성에 대입 값, 반환}export default Dice;//외부 Dice 컴포넌트 사용 가능 코드○ App 컴포넌트 (App.js)import Dice from './Dice';//App 컴포넌트에서 리엑트 컴포넌트 태그 를 사용할 수 있도록 importfunction App(){ return ( //Dice컴포넌트 + color 속성값 지정 + 반환 )}export default App;//외부에.. 2024. 11. 22. (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. 이전 1 ··· 20 21 22 23 24 25 26 ··· 67 다음
