본문 바로가기

CodeIt_Sprint87

(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.
(10)React_초급_ useState() 실습문제 ◎ 연습문제1 :이번엔 배점 기능을 한번 구현해 보겠습니다.원하는 숫자로 배점을 정하면, 게임이 진행될 때마다 이긴 쪽이 해당하는 점수를 얻는 기능이예요.input 태그로 배점을 정하고 이것에 따라 점수에 반영하려고 합니다.여기서 리액트에서 특별한 prop을 하나 사용해 보도록 하겠습니다.onChange바로 input 태그의 onChange라는 prop입니다.이전에 자바스크립트로 input을 다루는 방법을 공부하셨다면, 입력값이 변경될 때마다 이벤트를 받으려면 oninput 이벤트 핸들러 함수로 처리한다는 걸 배웠을 겁니다.하지만 리액트에서는 onChange 라는 prop을 사용해서 처리합니다. 동작은 oninput 이벤트 핸들러이지만 onChange으로 사용하는 건데요.의미상으로도 좀 더 직관적이죠? .. 2024. 11. 23.
(9)React_초급_JSX 문법6 : useState(기본자료형) vs useState(참조자료형) ● Defalut 상황○ Dicegame 프로젝트에서, useState()메소드를 이용하여, 돌렸을 때마다, " 총점 , 기록 " 을 하는 항목 추가해보기 - App.js :import { useState } from 'react';import Button from './Button';import Dice from './Dice';function random(n) { return Math.ceil(Math.random() * n);}function App() { const [num, setNum] = useState(1); const handleRollClick = () => { const nextNum = random(6); setNum(nextNum); }; const handle.. 2024. 11. 23.

티스토리툴바