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..

JSX JavaScript XML의 약자로, JavaScript의 확장 문법 HTML과 비슷하게 보이지만, 실제로는 JavaScript 코드React에서 JSX를 사용하면 UI를 보다 직관적으로 구성 가능  직관적이고 가독성이 좋음JSX는 HTML과 유사해서 웹 개발자들이 직관적으로 이해하기 좋음기존 JavaScript의 React.createElement() 방식보다 코드가 깔끔하고 가독성이 좋음UI와 로직의 통함UI와 관련된 로직을 한 곳에서 작성 가능예:버튼을 생성, 생성한 버튼을 클릭했을 때의 동작을 같은 파일에서 정의  JSX의 사용법 JSX 안에서 JavaScript 사용 JSX 내부에서 JavaScript 표현식을 사용하려면 {} 중괄호 사용const name = "리액트";const ele..

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)..

Interaction (Event) in R3F  3D 인터랙티브 이벤트 처리하기 인터랙티브 이벤트 : 사용자의 이벤트를 수신하는 방법 R3F는 컴포넌트의 콜백함수를 통해서 3D 객체와 상호작용을 추가하여 인터랙티브한 웹 경험을 구현 인터렉션(Interaction)사용자가 3D 객체와 상호 작용하는 방식클릭드래그스크롤키보드 입력Events and Interation Events and Interaction - React Three FiberLet's make our meshes react to user input.r3f.docs.pmnd.rs  @react-spring/three 설치npm install three @react-spring/three @react-spring/three@9.7.5 Reac..

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..

Obj 3D + Transform Object 3D 모든 3D 객체의 부모 클래스 Scene, Mesh, Group, Camera 등 모든 주요 요소가 Object3D를 상속받음→ 자동으로 생성되는 Scene도 Object3D의 인스턴스position, rotation, scale 등의 변형(Tranform) 속성을 기본적으로 가짐Object3D를 상속받은 모든 객체는 Transform(변환)기능 사용 가능→ useThree 훅을 사용하면 scene을 가져와서 조작 가능Object3 three.js docs threejs.org   useThree 훅을 이용한 Scene 접근import { Canvas, useThree } from "@react-three/fiber";const Element = () ..

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..