if(life){code();}

이벤트 처리 (Event Handling) 사용자의 상호작용(클릭, 입력, 제출 등)을 감지하고 처리하는 방식 대표적인 이벤트 핸들러onClick : 버튼 클릭 이벤트onChange : 입력 필드 값 변경 이벤트onSubmit : 폼 제출 이벤트*React에서 이벤트는 CamelCase(onClick, onChange, onSubmit)로 사용 이벤트 핸들링 예:버튼 클릭 시 값이 추가됨입력 필드 값 변경 감지 후 업데이트 입력 필드 값 변경 감지import { useState } from "react";function TodoInput() { const [task, setTask] = useState(""); const handleOnChange = (e) => { setTask(e.targe..

State React에서의 State 컴포넌트의 상태컴포넌트가 가지고 있는 데이터나 조건을 나타냄예:Todo List에서의 할 일 목록 == 컴포넌트의 상태→ 사용자가 할 일을 추가하거나 삭제하면 상태가 변경, 이에 따라 UI가 업데이트됨 useState Hook을 사용한 상태 관리 상태 값을 정의하고, 이를 업데이트하는 함수도 함께 제공해야 함 (상태 정의, 변경)const [state, setState] = useState(initialValue);state: 현재 상태 값setState: 상태를 변경하는 함수initialValue: 초기 상태 값상태 값을 변경하면 React가 자동으로 해당 컴포넌트를 다시 렌더링 하여 UI를 업데이트함 State 업데이트 방법 새로운 값을 바로 설정 setState..

React App 생성npx create-react-app 앱이름npx(Node Package eXecute)설치 없이 패키지 실행최신 버전 실행로컬 설치된 패키지 실행일회성 스크립트 실행특정 패키지를 글로벌 설치 없이 한 번만 실해하고 삭제→ 전역 설치 없이 최신 버전으로 프로젝트 생성  애플리케이션 실행cd 앱이름만든 프로젝트 폴더로 이동 (changediretory 앱이름)npm startReact App 시작 (Node Package Manager start)  CRA

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 JavaScript를 사용하여 웹사이트의 UI(User Interface)를 구성하는 라이브러리→ 우리가 보는 버튼, 메뉴 등과 같은 요소를 쉽게 만들고 관리할 수 있도록 도와줌 페이스북에서 개발하여 오픈 소스로 공개됨  선언적 UI 라이브러리 선언적(Declarative) 프로그래밍 방식을 따름→ "어떻게(How)" 동작하는지보다 "무엇(What)"을 해야 하는지에 집중 예:특정 버튼을 클릭하면 화면이 어떻게 변해야 하는지를 선언적으로 작성하면, 내부적인 렌더링 과정은 React가 자동으로 처리함→ 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있음 컴포넌트 기반 (Component-Based) UI를 컴포넌트(Component)..

Camera 조작 3D 공간에서 카메라의 위치(position)와 시점(lookAt) 조절의 의미 : 사용자의 시각적 경험 결정  Leva를 활용한 카메라 조작 Leva 라이브러리의 useControls를 사용한 카메라 조작npm i leva  useControls를 이용해 카메라의 Z축 위치와 Y축 시점을 조절할 수 있는 슬라이더 생성import { useControls } from "leva";import { useThree } from "@react-three/fiber";const Elements = () => { const { camera } = useThree(); const dirLight = useRef(null); useHelper(dirLight, THREE.DirectionalL..

Light & Shadow React Three Fiber(R3F)에서 빛과 그림자는 3D 장면을 보다 현실감 있게 만드는 요소 빛이 없다면 아무것도 보이지 않으며, 그림자가 없다면 입체감이 부족하게 보일 수 있음현실 세계를 가상으로 모방하는 3D 그래픽에서는 빛과 그림자의 효과를 적절하게 조절하는 것이 필수적  빛(Light)ambientLight : 장면 전체를 균일하게 밝게 비춤pointLight : 특정 위치에서 전 방향으로 빛을 방출spotLight : 특정 위치에서 원뿔 형태로 빛을 쏨directionalLight : 태양광처럼 특정 방향에서 평행하게 빛을 쏨 ambientLight (전체적인 밝기 조절)  directionalLight (태양광과 같은 평행한 빛)  빛의 위치 조절positi..

Material 3D 객체의 표면 표현 방식을 정의하는 요소3D 랜더러가 객체를 그릴 때, 빛의 반사, 색상, 투명도 등 다양한 특성을 결정 *Three.js에서 모든 재질(Material)은 Material 클래스를 상속받아 만들어져 있음  Material의 형태Point Material점으로 표현되는 재질Line Material선으로 표현되는 재질Mesh Material메시 형태로 표현되는 재질 (가장 많이 사용되는 유형), 여러 가지 타입이 있음MeshBasicMaterial, MeshStandardMaterial, MeshLambertMaterial, MeshPhongMaterial 등이 존재Meterial three.js docs threejs.org   Material의 주요 속성  visib..

Geometry 기하학적 구조mesh의 모양(shape)을 정의하는 컴포넌트 Three.js에서는 Geometry가 삼각형(Tris)들로 이루어진 구조로 표현됨모든 Geometry는 BuffetGeometry 클래스를 상속받아 사용됨  *Three.js에서 Geometry를 삼각형(Tris)으로 만드는 이유삼각형은 가장 단순한 다각형삼각형은 가장 적은 점(Vertices)으로 면(Face)을 만들 수 있는 도형다른 다각형도 삼각형의 조합으로 만들 수 있음사각형(Quadrangle) → 삼각형 2개로 구성오각형(Pentagon) → 삼각형 3개로 구성 *High Poly vs. Low Poly High Poly : 삼각형 개수가 많아 곡면이 부드럽게 표현됨Low Poly : 삼각형 개수가 적어 성능이 좋지..

Three.js와 react-three-fiber(R3F)를 활용하여 3D 개발을 할 때 유용한 도구들OrbitControls → 3D 공간을 자유롭게 탐색 가능AxesHelper → 좌표 축을 직관적으로 이해할 수 있음GridHelper → 바닥과 같은 참조선을 쉽게 추가 가능이를 활용하여 카메라 컨트롤, 좌표 축 표시, 그리드 배경 등 직관적인 가이드라인을 추가   OrbitControls 카메라를 마우스 또는 터치 제스처를 사용하여 조작할 수 있도록 해주는 컨트롤 도구마우스를 이용해 회전, 확대/축소(Zoom), 패닝(이동)이 가능 좌클릭 + 드래그 → 카메라 회전 (Orbit)우클릭 + 드래그 → 카메라 위치 이동 (Pan)휠 스크롤 → 줌 인/아웃 (Zoom) Canvas 내부에 를 선언하면, ..

Scene 3D 환경을 구성하는 가장 기본적인 단위Camera를 통해 렌더링되기 위해 여러 Object들이 배치됨  Three.js 및 React Three Fiber(R3F)에서 Scene을 구성하는 주요 요소Mesh, Geometry, Material (+ Lighting, Grouping, Interaction 등이 추가됨)  Mesh (메쉬)Geometry (형태)와 Meterial (재질)을 결합하여 3D 객체를 생성하는 기본 단위  예시 코드 조각 {/* 정육면체 */} {/* 기본 재질 */}  Geometry (형태) 3D 객체의 형태 또는 구조를 정의하는 요소  기본 Geometry 종류boxGeometry → 박스(큐브)sphereGeometry → 구(공)planeGeometr..