CodeIt_Sprint/React_초급19 (14)React_초급_React_Design_3_React에 CSS 적용하는 여러가지 방법 ● 이미지 파일 불러오기 : import VarImg from '이미자파일 경로' + VarImg}>- Ex : import diceImg from './assets/dice.png';function Dice() { return ;}export default App;● 인라인 스타일 : const style 객체 ○ const style에 시트 넣을 때, 속성명 : 카멜Case대입 연산자 : ':' ('=' 아님)연결 연산자 : ', ' (';' 아님)- Ex : import diceImg from './assets/dice.png';const style = { borderRadius : '50%', width : '120px', height : '120px',};function Dice.. 2024. 11. 25. (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. (12)React_초급_React가 랜더링하는 방식, React_Design_1_인라인스타일 ● 알아야 하는 개념 2가지 : React의 Rendering과 Virtual DOM 간략 설명1. RenderingReact에서 렌더링은 UI를 업데이트하거나 새로 그리는 과정입니다.초기 렌더링 (Initial Rendering):애플리케이션이 처음 실행될 때 React 컴포넌트 트리를 기반으로 Virtual DOM을 생성하고, 이를 실제 DOM으로 변환하여 브라우저에 그립니다. //Html 작동 방식과 다르다.(얘는 그냥 초가 DOM을 기반으로 브라우저 그린다.)리렌더링 (Re-rendering):컴포넌트의 상태(state)나 속성(props)이 변경되면 React는 해당 컴포넌트와 관련된 UI를 다시 그립니다. //Html 는 수정 된후 , 다시 처음부터 렌더링을 한다. (쓸데없는 낭비가 많다는 뜻.. 2024. 11. 23. (11)React_초급_ 컴포넌트 재사용 하기(작성중) ● Defalut 상황 ● 1단계 : Defalut의 App.js 컴포넌트를 Board컴포넌트로 수정한뒤, Board컴포넌트 2개(나, 상대)가 들어있는 App.js 적용 후, index.js에 컴포넌트만 사용해서 작동시켜보기§ 해당 요구사항 출력 결과 :§ 과정 : ● 2단계 : "던지기" 버튼 , "처음부터" 버튼 하나로, 2개의 주사위를 동시에 적용되도록 하기§ 과정 :○ 순서1_ App 컴포넌트에 useState 메소드를 가져와야 => Board.Blue 컴포넌트, Board.Red 컴포넌트를 동시에 다룰 버튼 적용 가능 function App() { //나의 패 데이터 const [myNum,setMyNum] = useState(1); const [mySum,setMySum] = useS.. 2024. 11. 23. 이전 1 2 3 4 5 다음
