CodeIt_Sprint87 (9)React_초급_JSX 문법6 : props객체의 Children 프로퍼티, useState 사용하기 ● Defalut 상황○ App.js + index.js//App.jsimport Dice from './Dice';function App() { return ( )}export default App;//index.jsimport ReactDOM from 'react-dom/client';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );■ 주사위 위에 "던지기" , "처음부터" 라는 버튼을 Button 컴포넌트 태그로 만들어 보기● 개념1_ props객체의 children 프로퍼티 이용해서 Button 컴포넌트 만들기=> sr.. 2024. 11. 23. (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. 이전 1 ··· 11 12 13 14 15 16 17 ··· 22 다음
