Front-End Study/React.js12 State 지속적으로 변화하는 값(컴포넌트 내에서 변화를 주도) import { useState } from 'react'; export default function Body(){ const [Light, setLight] = useState('OFF'); // 새로운 State 생성, 문자열"OFF"생성(초기값) // Light = state 값, setLight = 상태변화함수(state 값의 변화) return( body {Light} { setLight("ON"); // 상태변화함수 호출 후, state값의 문자열 변경(인수 전달) }} >켜기 { setLight("OFF"); // 위와 동일 }} >끄기 } -> 이렇게 값이 변경 가능한 이유 : 리액트가 컴포넌트의 값이 바뀔 때마다 렌더링을 다시하기 때.. 2024. 2. 15. Event Handling Event(웹에서 일어나는 사용자의 행동) + Handling(다루다, 처리하다) = 웹 사용자의 행동 처리 이벤트 핸들러 export default function Button({color, text, children}) { return( { // vanila JS와 거의 동일(이벤트 핸들러 형식) alert('clicked!'); }} style={{ backgroundColor: color }}> {children} ) } export default function Button({color, text, children}) { const onClick = () => { alert('clicked!'); } return( {children} ) } 이벤트 객체 이벤트 핸들러를 통해 이벤트를 받아오는 과.. 2024. 2. 15. Props props React앱에서 자식 컴포넌트에게 데이터를 보내주고자 할 때 사용하는 문법 // 여러개의 버튼에 각기 다른 텍스트를 적용하고 싶은 경우 return( body ) // 자식 컴포넌트에 요소를 추가할 경우 props프로퍼티로 이를 받아옴 export default function Button(props) { const {color, text} = props return( {"props.text"} ) } -> 객체 형태로 넘어오기 때문에, 구조분해할당도 적용(더 간단하게) export default function Button({color, text}) { return( {text} ) } -> 객체 프로퍼티로 넘어가는 형식이기 때문에, 아예 객체로 정의하여 사용도 가능 export defaul.. 2024. 2. 11. JSX 문법 JavaScriptXML의 약자(JS + HTML) // ex export default function Body(){ const num = 10; const string = "hello"; const bool = true; // boolean 값은 자식요소로 작성 불가 const obj = { // 객체는 자식요소로 작성 불가 obj.a는 가능(number 값이기 때문) a:1, } // 선언문이 아닌 표현식만 작성 return( Body {num} {num % 2 ? '짝수':'홀수'} ) // 조건부 렌더링 return( Body {num % 2 === 0 ? {num}는 짝수입니다.:{num}은 홀수입니다.} ) } JSX 문법 규칙 닫는 태그()를 꼭 사용 return하는 모든 값들은 최상위 부.. 2024. 2. 7. React 실행 과정 이해 Module을 통한 요소 생성 npm vite 라이브러리를 활용해 react APP 생성에 필요한 추가적인 파일들을 다운받는 것이 기본 구성 npm create vite@latest > 가장 최신 버전으로 vite 설치 npm install > package-lock.json 및 node_modules 설치 npm run dev > package.json의 script에 작성되어있는 dev(개발자용 vite APP)를 실행 ESM 형식으로 module 불러오기 일반적으로 index.html에 root로 사용하는 div태그 하나만 작성 -> jsx 형식의 다른 파일들을 ESM 형식으로 root로 불러와 활용(빠른 업데이트를 제공하기 위함) import React from 'react'; imp.. 2024. 2. 6. React_Virtual Dom 이해 브라우저의 렌더링 과정 주요 렌더링 경로(critical Rendering Path)를 통해 브라우저가 코드를 알아보기 쉽게 해석 -> DOM트리 형태로 변환 Render Tree HTML로 작성한 요소의 배치 및 모양, CSS로 작성한 요소들의 스타일이 합쳐진 청사진 Layout 화면에 나타날 요소들의 위치 및 크기 결정 Painting 실제 요소를 화면에 그려내는 과정 HTML - DOM Render Tree - Layout - Painting CSS - CSSOM JS의 적용으로 DOM 수정 Reflow, Repainting 렌더링 과정 재진행, 이에 따라 발생하는 Reflow와 Repainting을 최소화를 목표 -> 성능의 최적화 < RE: Browser .. 2024. 2. 6. 이전 1 2 다음