전체 글134 [React🩵] 브라우저의 렌더링과 리액트의 렌더링 ☀︎ 브라우저와 리액트 렌더링의 공통점코드를 시각적으로 화면에 보여주는 과정이다즉, 렌더링이란 눈에 보이지 않는 코드 구조를 사용자에게 보이는 형태로 바꾸는 작업이다 = UI를 화면에 그리는 작업 ☁︎ 브라우저에서의 렌더링HTML, CSS, JS를 받아서 순차적으로 화면을 구성한다브라우저는 문서를 위에서부터 차례대로 읽으며 HTML(구조), CSS(스타일), JS(동작)을 해석한 뒤 화면을 완성해 나간다DOM(Document Object Model)을 직접 다루며, JS나 사용자의 변경사항 발생 시 DOM의 일부 또는 전체를 다시 계산(Reflow)과 그리기(Repaint)가 발생하기 때문에 복잡하고 버그가 생기기 쉽다브라우저의 렌더링 과정CPR(Critical Redering Path)의 과정을 통.. 2025. 5. 6. [React🩵] props와 리액트의 데이터 단방향 흐름 핵심 키워드 정리state : 컴포넌트가 가지고 있는 데이터props : 부모가 자식에게 넘겨주는 값단방향 흐름 : 데이터는 위에서 아래로만 흐른다(부모→자식) 먼저 중요한 개념은자식은 부모의 상태(state)를 직접 바꿀 수는 없다.하지만 자식은 부모가 넘겨준 함수를 통해 호출해서 이벤트 발생했다고 알려줄 수 있다. “데이터는 부모에서 자식으로 흐르고, 자식은 부모가 넘겨준 함수를 호출해 상호작용한다.” 간단한 좋아요 버튼 예제로 알아보기!import { useState } from "react";// 부모 컴포넌트function App() { const [likes, setLikes] = useState(0); // 상태는 부모가 가짐 function handleLike() { se.. 2025. 4. 23. [JavaScript] 객체의 속성(property) 접근 방법 . (점) 호출: 변수처럼 직접 이름을 써서 호출한다[] (대괄호) 호출: 문자열을 키로 줄 수 있다var obj = { name: 'apple', color: 'red'};// 점으로 접근console.log(obj.name); // 'apple'// 대괄호로 접근console.log(obj['name']); // 'apple' 보통 []는 키를 문자열이나 변수로 넣어야할 때 사용한다 1. 속성 이름이 변수로 있을 때var key = 'color';console.log(obj[key]); // 'red' 2. 속성 이름에 공백이나 특수문자가 있을 때var obj2 = { 'my name': 'banana'};console.log(obj2['my name']); // 'banana'c.. 2025. 4. 5. ✨ Swift 시점 타입스크립트 로드맵 ✨ https://chatgpt.com/canvas/shared/67ef93f664b48191afe71eba71175350✨ Swift 가상 TypeScript 입문 로드맵 ✨✅ 1단계: 타입 기본 감 잡기 (Swift 타입 ≈ TS 타입)배우게:number, string, booleanany, unknownnull, undefinedobject 타입Swift 같이 쓰기:let age: number = 24;let name: string = '다정이';✅ 2단계: 함수에 타입 구조 다기배우게:함수 매계번수 타입함수 리턴 타입function add(a: number, b: number): number { return a + b;}✅ 3단계: 인터페이스(Interface) 이타배우게:interfacetype .. 2025. 4. 4. [JavaScript] 동등 연산자(==)와 일치 연산자(===) 동등연산자(==)타입이 달라도 값을 비교할 때 자동으로 타입 변환(type coercion)을 한 후 비교한다느슨한 비교라고 부른다(loose equality) 1 == '1' // true (문자열 '1'이 숫자 1로 변환된 뒤 비교)0 == false // true (false가 숫자 0으로 변환)null == undefined // true (특수 케이스) 일치 연산자(===)타입까지 정확히 같아야 true엄격한 비교라고 부른다(strict equality)1 === '1' // false (숫자 1과 문자열 '1'은 타입이 다름)0 === false // false (0은 number, false는 boolean)null === undefined // false 기본적으로 일치연산자를 .. 2025. 4. 4. [JavaScript] 자바스크립트 객체 다루기 keys, for...of 자스에서 객체나 배열을 다룰 때 자주 쓰이는 것들잊어버릴까봐 쓰는 포스팅 아래의 객체가 있을 때const person = { name: "John", age: 30, gender: "male"}; Object.keys는 객체의 모든 key(속성 이름)를 배열로 반환한다console.log(Object.keys(person));//["name", "age", "gender"] Object.values는 객체의 모든 value(값)를 배열로 반환한다console.log(Object.values(person));//["John", 30, "male"] Object.entries는 객체의 [key, value] 쌍으로 묶어서 2차원 배열로 반환한다console.log(Object.entries(pe.. 2025. 4. 3. [React🩵] 리액트의 리렌더링과 불변성 어느날 스프레드 연산자를 사용한 코드를 보다가 문득 든 생각 스프레드 연산자를 사용하면 기존의 배열을 모두 가져오게 되는데, 왜 굳이 다 가져와야할까?배열에서 원하는 요소만 이벤트를 주려면 id를 비교해서 해당 값만 변경하는 것이 더 효율적인 방법 아닐까? 라는 의문이 들었다 그 이유는 리액트는 상태가 변했을 때 리렌더링하기 때문이다새 배열을 전달 받아야만 "이 배열이 이전과 다른 배열이구나" 하고 인식을 하게 된다 그럼 여기서 또 든 의문... 왜 굳이 모든 값을 가져와서 새로운 배열을 만들어줘야할까? 그 이유는 "불변성(immutability)" 때문인데 완전히 새로운 배열을 전달해야 리렌더링이 일어난다 변경이 없는 부분까지 불필요하게 새로 만드는 것이 더 비효율적인 방법이 아닐까??리액.. 2025. 3. 29. [JavaScript] Map 배열 메서드 종합 .findIndex : 순서 찾기. 조건을 함수로 전달해야함. 못찾으면 -1를 반환 const arr = [ { id: 1, name: "피카츄" }, { id: 2, name: "파이리" }, { id: 3, name: "꼬부기" },];arr.findIndex(pokemon => pokemon.id === 2); // 👉 1arr.findIndex(pokemon => pokemon.name === "라이츄"); // 👉 -1 .indexof: 배열에서 값 찾기. 못찾으면 -1를 반환 const arr = [10, 20, 30, 40];arr.indexOf(30); // 👉 2arr.indexOf(50); // 👉 -1 (없으면 -1) 2025. 3. 28. [React🩵] a 태그와 Link 태그 a태그는 기본적으로 코드 실행 시 브라우저가 전체 페이지를 새로고침 하게 된다(전통적인 방식)이는 앱의 State가 초기화되는 문제가 발생할 수 있다이동하기 하지만 요즘은 SPA(Single Page Application) 방식 = JS를 이용해서 페이지를 동적으로 변경하는 방식이 일반적이다이때 Link 태그를 사용하면 브라우저의 새로고침 없이 페이지 전환이 가능하다import Link from 'next/link';function Home() { return ( About 페이지로 이동 );}export default Home; 구분a 태그Link 태그 기본동작페이지를 새로고침하여 이동새로고침없이 클라이언트 사이드에서 전환상태유지초기화됨유지됨속도전체 새로고침 되므로 상대적으.. 2025. 3. 20. [React🩵] 리액트 메모이제이션 총 정리! 01. 메모이제이션이란?메모이제이션은 이전에 계산된 결과를 저장해두고 동일한 입력값이 들어오면 다시 연산하지 않고 저장된 값을 반환한다리액터에서는 불필요한 렌더링을 방지하고, 성능을 향상시키기 위해 활용한다 불필요한 리랜더링을 방지하고 성능을 최적화한다비싼 연산의 재계산을 방지한다(데이터 필터링, 정렬 등)이벤트 핸들러나 콜백 함수의 재생성을 방지한다 02. React.memo컴포넌트가 변경되지 않으면 다시 렌더링 하지 않는다 컴포넌트가 동일한 props를 받을 때 불필요한 리렌더링을 방지한다내부적으로 얕은 비교(shallow comparison)를 수행하여 props가 변경되지 않으면 렌더링을 생략함 2-1. 기본 사용법const MemoizedComponent = React.memo(Compo.. 2025. 3. 18. 이전 1 2 3 4 ··· 14 다음
