티스토리챌린지8 (17)React_초급_DiceGame_React_Project_1_JSX작성부분 https://kojammin.tistory.com/199 (15)React_초급_React_Design_최종 실습문제 2문제(이건 여러번 복습)◎ 연습문제1 : 앞의 레슨들에서는 리액트의 개념을 배우면서 기능을 하나씩 완성해 보았습니다. 이제 남은 것은 이미지를 배치하고 CSS로 디자인을 마무리하는 거겠죠? 완성에 필요한 이미지 파kojammin.tistory.com위의 문제의 Dicegame 프로젝트를 만들어본 과정입니다.◎ 1_ index.js 작성 과정 //직접적으로 출력되는 js파일● [index.html]코드를 봤을 때, 태그 내 자식인 div#root 안에서 제작될 것이다.-index.html ● 그래서, index.js는 아래와 같이 작성 시작import를 통해 ReactDom을 불러.. 2024. 11. 26. (13)React_초급_React_Design_2_외부CSS파일 불러오기 ● 과정1_ index.js에 index.css적용하기○ 순서1 : [src폴더] 내에서, [Style폴더]를 생성 후, index.js를 꾸미는 담당을 하는 CSS파일 생성○ 순서2 : index.css 에 body의 배경색, 글자색 css 코드 작성 후, index.js에 불러오기- 외부 CSS 파일 불러오는 방법 : import + 'css파일 경로' //처음부터 이렇게 알려주던가 시발import './Style/index.css';○ 출력 결과 :● 과정2_ Button.js 컴포넌트에 아래와 같이 작성된 Button.css를 적용하기○ Button.css.Button{ padding : 14px 27px; border-radius: 9999px; outline : none; cursor .. 2024. 11. 25. (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. 이전 1 2 다음
