728x90 반응형 Coding With Jina/React19 [React] React Hooks이란 1) React Hooks이란? : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 2) React Hooks 종류 종류 기능 useState 함수형 컴포넌트에서 상태를 추가 useEffect side effect 수행 -mount/unmount/update useContext React 컨텍스트(Context)를 사용하여 컴포넌트 간에 전역적으로 상태를 공유, 컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리 useReducer useState 대신 복잡한 상태 논리를 다룰 때 사용. 복잡한 컴포넌트들의 state를 관리 - 분리 useCallback 콜백 함수를 메모이제이션 useMemo 계산 비용이 높은 값을 메모이제이션 useRef DOM 요소에 접근하거나, 컴포넌트의 인스.. 2024. 3. 28. [React] Virtual DOM의 개념과 동작 방식 1) DOM이란? - Document Object Model(문서객체모델)의 약어로 객체로 문서 구조를 표현하는 방법을 말함 - 웹 페이지의 구조화된 표현을 생성하고 프로그래밍적으로 접근하고 조작할 수 있는 인터페이스를 제공 - HTML, XML 및 XHTML과 같은 문서의 구조, 스타일 및 콘텐츠를 표현하는 방법을 정의 - JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지의 요소를 동적으로 변경하거나 조작 - 사용자 인터페이스를 구성하고 사용자와의 상호 작용을 처리하는 데 중요한 역할 - 웹 페이지를 트리 구조로 나타내며 각 요소는 객체로 표현 2) Virtual DOM 개념과 동작 방식 - 실제 DOM의 가벼운 복사본 - 웹 애플리케이션에서 사용자 인터페이스를 효율적으로 관리하기 위해 사.. 2024. 3. 28. [React] 리액트 이미지 슬라이드(Carousel) 만들기 - React Material UI Carousel ● React Material UI Carousel 설치하기 1. 이 라이브러리/구성 요소를 사용하려면 Material UI를 설치해야함 npm install @mui/material npm install @mui/icons-material npm install @mui/styles 2. carousel를 다운받기 npm install react-material-ui-carousel --save ● React Material UI Carousel 사용하기 1. import 하기 import Carousel from 'react-material-ui-carousel' import { Paper, Button } from '@mui/material' 2. 사용하고 싶은 곳에 적용하기 { 보여주고자 하는 내용.. 2023. 2. 8. [React] 리액트 라우터 페이지 나누기 - 리액트 라우팅 ● 라우터란? - React-Router는 각각 다른 HTML을 보여주는게 아니라 내부를 완전히 교체해 다른 페이지처럼 보이는 것 ● 리액트 라우터 페이지 분할 방법 - 로 페이지를 분할 1. 우선 상단에서 여러가지 컴포넌트를 import 해오고 import { Routes, Route, Link } from 'react-router-dom' 2. 만들고 그 안에 를 작성 3. 안에 이런 형식으로 작성 4. 결과 (App.js) import { Routes, Route, Link } from 'react-router-dom' function App(){ return ( {/* (생략) */} ) } ● 메인페이지로 이동할때 - path에 / 를 입력하면 메인페이지라는 뜻 ● 페이지 이동할때 - 유저들은 .. 2023. 2. 7. [React] 리액트 라우터 설치와 셋팅 - react-router-dom 설치방법 ● React Router 종류 - 웹React Router는 웹과 앱용이 있음 ・ react-router: 웹&앱 ・ react-router-dom: 웹 ・ react-router-native: 앱 ● react-router-dom이란? ・ react의 내비게이션 라이브러리 ・ React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동됨 ● 설치방법 ・ 터미널에서 npm install react-router-dom@6 입력해서 설치 ● 셋팅방법 ・index.js 파일로 가서 ① import { BrowserRouter } from "react-router-dom"; 해오고 ② 안에 을 감싸면 끝 import { BrowserR.. 2023. 2. 6. [React] 리액트 Hook - useEffect( ) 함수 이해 쉬운 개념 정리 ◾ useEffect 개념 useEffect(()=>{ //원하는 작업 }); - 인자로 콜백함수를 받는다. - 콜백함수 : 다른 함수의 인자로 전달된 함수를 의미 ◾ useEffect 형태 1) useEffect의 인자로 하나의 콜백함수만 받는 형태 - 컨퍼넌트가 매번 랜더링이 될때마다 콜백이 실행됨 useEffect(()=>{ //원하는 작업 }); 2) useEffect의 첫번째 인자로 콜백함수, 두번째 인자로 배열(dependency array)을 받는 형태 - 화면에 첫 렌더링이 될때 실행되고 value 값이 바뀔때 실행됨 useEffect(()=>{ //원하는 작업 },[value]); 3) useEffect의 첫번째 인자로 콜백함수, 두번째 인자로 빈 배열을 받는 형태 - 컨퍼넌트가 맨 처음.. 2022. 11. 17. 이전 1 2 3 4 다음 728x90 반응형
