분류 전체보기

Hook의 규칙

🧐 React Hooks란? 함수형 컴포넌트에서 state 관리와 Life Cycle을 다룰 수 있게 하는 기술이다.🧐Hooks의 도입 이유? 클래스형 컴포넌트에서 발생하는 몇몇 불편한 점들을 극복하기 위해- this 값의 변경- 떨어지는 가독성- HOC패턴의 Wrapper 지옥 🧐Hook의 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 한다.- 반복문, 조건문 또는 중첩된 함수 내에서 Hook을 호출해서는 안 된다.- 모든 렌더링에서 동일한 순서로 Hook을 호출해야 한다. 오직 React 함수 내에서 Hook을 호출해야 한다.- 일반적인 JavaScript 함수에서 호출해서는 안 된다. - React 함수 컴포넌트에서 Hook을 호출해야 한다.  Hook 이란?2018년 ..

리액트버전 18부터 등장하는 Batching 개념

🧐  Batching 이란 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변경 사항을 일괄 처리하여 렌더링 주기를 최적화하는 방식을 의미한다. Batching리액트 버전 18부터 더욱 강화되었다.이벤트 처리 방식의 개선으로, 성능을 향상하는데 도움이 된다.리액트가 UI 업데이트를 처리할 때 여러 업데이트를 일괄로 처리하여 렌더링 주기를 최적화하는 방식을 의미한다.  기존상태(State)가 업데이트되면, 해당 컴포넌트와 그 자식 컴포넌트들이 모두 다시 렌더링 되었다.이러한 방식은 작은 업데이트도 큰 렌더링 작업으로 이어질 수 있어 성능 문제가 발생할 수 있었다.  버전 18여러 상태 업데이트를 한꺼번에 처리하여 렌더링 작업을 최적화한다.예를 들어, 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변..

애니메이션 기본

draw함수로 그리기 부분 넣기 렌더러가 렌더 메서드를 호출하는 부분을 draw 함수 안으로 넣기 src/ex05_animationBasic import * as THREE from "three"; /* 주제: 애니메이션 기본 */ export default function example() { /* Renderer 만들기 : html에 캔버스 미리 만들기 */ const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true // alpha: true // 배경 투명도 설정 }); renderer.setSize(window.innerWidth, win..

빛(조명) 설정하기

src/ex04_lightimport * as THREE from "three";/* 주제: 빛(조명) 설정하기 */export default function example() { /* Renderer 만들기 : html에 캔버스 미리 만들기 */ const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true // alpha: true // 배경 투명도 설정 }); renderer.setSize(window.innerWidth, window.innerHeight); /* 디바이스 픽셀 비율을 설정 */ renderer...