WEB/REACT3 리액트 복습-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. 이전 1 다음
