WEB4 리액트 복습-3 Hooks 사용(state, memo, Effect...) 1. Hook 이란 무엇인가?함수영 컴포넌트에서 React의 기능(상태관리, 생명주기 등)을 사용할 수 있게 해주는 함수입니다Hook의 기능은 과거 클래스에서만 사용할 수 있었는데 이 기능을 함수형 컴포넌트에서 사용할 수 있게 되면서 업데이트된 기능이 바로 Hook입니다 2. Hook의 종류useState : 상태관리 useEffect : 생명주기 관리useContext : 전역 상태 접근useRef : DOM 제어 및 상태 값 저장useMemo : 값 메모이제이션useCallback : 함수 메모이제이션useReducer : 복잡한 상태 로직 관리등이 있으며 현재 18 버전 이후로 새로운 훅들이 추가되었습니다 3. 훅의 특징use로 시작해야 합니다함수 컴포넌트 및 커스텀 훅 내부에서만 사용 가능하비다조.. 2025. 3. 27. 리액트 복습-2 Layout구성, React Router 사용해보기 1. 레이아웃의 구성대부분의 레이아웃의 형태는 보통 Header, Content, Footer 구조로 이루어져 있습니다 이 페이지에서 변하지않고 항상 사용되는 영역은 어떤 영역일까요? 보통 Header, Footer 영역입니다 각 페이지마다 내용이 거의 변경되지않습니다그렇기 때문에 별도 컴포넌트로 나눠서 관리하도록 했습니다 import { BrowserRouter as Router } from "react-router-dom"; //리액트 라우터를 사용하도록import Header from "./layout/Header";import Content from "./layout/Content";import Footer from "./layout/Footer";function App() { return ( .. 2025. 3. 26. 리액트 복습-1 환경구축, 컴포넌트 만들기 1. 리액트 설치하기npx create-react-app my-appcd my-app 왜 npm 이 아닌 npx로 환경을 세팅하는가?npm은 패키지를 설치만 합니다 패키지를 직접 관리해야 하는 귀찮음이 있어요 그에 비해 npx는 패키지를 자동으로 설치하고 실행합니다 쉽게 말해서 설치화 실행(프로젝트생성 등)을 같이하는 자동화 도구라고 볼 수 있습니다 본 코드에서는 react 애플리케이션을 my-app 라는 폴더명으로 만들고 my-app 폴더로 이동하겠다는 명령어입니다 2. 리액트의 표준 프로젝트 구조my-app/├── public/│ └── index.html├── src/│ ├── assets/ # 이미지, 폰트, CSS 등 정적 파일│ ├── components/ .. 2025. 3. 26. Three.js 시작하기 웹 브라우저에서 3D 환경을 구현할 수 있는 기술에 대해 알아보고자 작성하게되었습니다웹 환경에서 3D 환경을 구현을 하려면 WebGL 이라는 기술을 사용해야합니다 WebGL은 JavaScript API 이면서 HTML5 의 캔버스 태그를 사용하여 출력할 수 있습니다 WebGL의 특징브라우저 기반 동작! (크로스 플랫폼 지원), 플러그인이 별도로 필요없음!GPU 가속지원 CPU 대신 GPU를 활용하여 빠르게 처리할 수 있습니다OpenGL 2.0 기반이라고 합니다 OpenGL은 그래픽을 사용하기 위한 API 이라고 하네요WebGL의 활용 분야게임 개발데이터 시각화VR/AR 서비스시뮬레이션 및 AI 시각화WebGL은 저수준 API입니다저수준 API란 프로세서와 직접적으로 상호작용하는 기능을 제공하는데 사용방법.. 2025. 3. 12. 이전 1 다음
