본문 바로가기
728x90
반응형

Coding With Jina154

[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.
[자바스크립트] 동기와 비동기 차이점 * 동기 순차적/직렬적으로 태스크를 수행 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어짐 순차적으로 실행되므로, 어떤 작업이 수행중이라면 뒤의 작업은 대기 블로킹(작업 중단)이 발생 * 비동기 병렬적으로 태스크를 수행 현재 작업의 종료여부와 무관하게 다음 작업을 실행 그러므로 동기 방식과는 달리 완료 순서가 보장되지 않음 블로킹이 발생하지 않음 동기는 요청의 결과가 그 자리에서 동시에 일어나야 하지만, 비동기는 그렇지 않음 따라서 동기적 주문의 경우 그 자리에서 커피를 받아야만 다음 작업을 처리할 수 있고, 비동기적 주문의 경우 진동벨을 받는 방식이라 한 번에 여러 주문을 처리할 수 있어 속도가 빨라지게 된다. 2023. 2. 3.
[React] 리액트 Hook - useEffect( ) 함수 이해 쉬운 개념 정리 ◾ useEffect 개념 useEffect(()=>{ //원하는 작업 }); - 인자로 콜백함수를 받는다. - 콜백함수 : 다른 함수의 인자로 전달된 함수를 의미 ◾ useEffect 형태 1) useEffect의 인자로 하나의 콜백함수만 받는 형태 - 컨퍼넌트가 매번 랜더링이 될때마다 콜백이 실행됨 useEffect(()=>{ //원하는 작업 }); 2) useEffect의 첫번째 인자로 콜백함수, 두번째 인자로 배열(dependency array)을 받는 형태 - 화면에 첫 렌더링이 될때 실행되고 value 값이 바뀔때 실행됨 useEffect(()=>{ //원하는 작업 },[value]); 3) useEffect의 첫번째 인자로 콜백함수, 두번째 인자로 빈 배열을 받는 형태 - 컨퍼넌트가 맨 처음.. 2022. 11. 17.
728x90
반응형

티스토리툴바