if(life){code();}

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

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에서의 카메라 Three.js에서는 카메라를 통해 3D 공간을 2D 화면에 투영→ 3D 장면을 렌더링하려면 반드시 카메라(Camera)가 필요   대표적인 두 가지 카메라  PerspectiveCamera (원근 카메라)현실 세계의 눈과 같은 방식으로 원근감 표현→ 멀리 있는 객체는 작게, 가까운 객체는 크게 보임3D 게임, 가상현실(VR), 건축 시각화 등에서 주로 사용됨 OrthographicCamera (직교 카메라)원근감을 적용하지 않고 모든 객체를 같은 크기로 표시X, Y, Z 축에 따른 왜곡 없이 일정한 크기로 보임2D UI, CAD(설계), 전략 게임 등에 적합     Three.js에서 카메라 속성position카메라의 위치 설정[x, y, z] 좌표로 지정lookAt카메라가..

3D Canvas 만들기 프로젝트 초기화 기본 프로젝트 설정  App.jsx 및 App.css 설정 App.jsximport "./App.css";function App() { return ;}export default App;  App.csshtml,body,#root { margin: 0; padding: 0; width: 100%; height: 100%;}  main.jsx import './index.css'코드제거   /src/index.css 파일 삭제 터미널에서 프로젝트 실행npm run dev   3D Canvas 추가 R3F(Canvas) 추가3D 환경을 만들기 위해 Canvas 추가 Canvas importimport { Canvas } from "@react-three/fi..