Fronted4 [React] state와 리액트 훅 State컴포넌트가 현재 가지고 있는 상태로 변화할 수 있는 동적인 값으로 state 값이 변경되었을 때 해당 컴포넌트와 자식 컴포넌트가 리렌더링된다.참고로 리렌더링이 되는 경우는 3가지로 나눌 수 있다.자신이 관리하는 state 값이 변경될 때제공받는 props의 값이 변경될 때부모 컴포넌트가 리렌더링되면 자식컴포넌트도 리렌더링State는 컴포넌트 내에서 정의되며, useState 훅을 사용하여 설정 가능import { useState } from 'react';const Test = () => { // count는 state, setCount는 상태를 업데이트하는 함수 const [count, setCount] = useState(0); //useState 함수 인자에는 상태의 초.. 2024. 12. 30. [React] JSX, props JSXReact에서 UI를 구성하기 위해 사용하는 문법으로 자바스크립트 코드 내에서 HTML과 유사한 구문을 사용할 수있도록 한다.이것이 가능한 이유는 브라우저에서 jsx 코드를 바벨을 사용해서 자바스크립트 형태의 코드로 변환해주기 때문이다.function Test() { return ( hello! );};export default Test;JSX는 HTML과 비슷한 구조를 가지고 있어 코드가 직관적이고 가독성이 좋음.JavaScript의 모든 기능을 사용할 수 있어 동적 UI 쉽게 구현 가능컴포넌트를 쉽게 정의하고 재사용할 수 있음. 특징1. JSX에서 {}를 사용하여 자바스크립트 표현식 사용 가능자바스크립트 표현식 → 삼항 연산자나, 변수의.. 2024. 12. 30. [React] Critical Rendering Path, SPA Critical Rendering Path브라우저가 하나의 화면을 렌더링하는 과정HTML 파싱: 브라우저는 HTML 문서를 읽고 DOM을 생성. (HTML 요소를 트리 구조로 표현)CSS 파싱: CSS 파일이 로드되면, 브라우저는 이를 파싱하여 CSSOM(CSS Object Model)을 생성.Render Tree 생성: DOM과 CSSOM이 결합되어 Render Tree가 생성브라우저에 실제로 표시될 요소와 각 요소의 스타일 정보도 포함하는 웹페이지의 설계도 역할.Layout: Render Tree가 생성된 후, 브라우저가 각 요소의 크기와 위치를 계산하는 과정Painting: Layout이 완료되면, 브라우저는 화면에 요소를 실제로 그린다.여기서 자바스크립트가 DOM을 수정하면 업데이트가 발생한다.즉.. 2024. 12. 30. [HTML, CSS, JS] 웹 개발 기초 HTML 태그 : 단락 : 제목(글자 크기에 맞춰 h1, h2, h3를 선택하는 것이 아님. 글자 크기는 css로 조절. h1은 한 페이지당 하나, h1,h2 없이 h3가 존재해선 안됨..)html 상용구 목록 요소 : 순서가 없는 리스트로 하위 요소는 로만 구성된다. hello1 hello2 hello3 hello4 : 순서가 있는 리스트로 하위 요소는 역시 hello1 hello2 hello3 hello4다음과 같이 중첩도 가능 hello1 hello_u1 hello_u2 hello2 hello2_u1 he.. 2024. 12. 30. 이전 1 다음
