FE - Tools/React10 [React] useRef 이용해서 스크롤 특정 위치로 이동시키기 useRef 이용해서 스크롤 특정 위치로 이동시키기 바닐라 자바스크립트에서는 querySelector를 사용하여 DOM에 접근하지만 React에서는 useRef로 DOM에 접근한다. 특정 컴포넌트에 동작을 수행하고 싶다면 useRef를 이용하면 된다. 그럼 useRef를 이용하여 NavBar의 글자 클릭 시 특정 위치로 이동하는 기능을 구현해보자! 우선, 전체 코드는 이렇게 생겼다. import React, { useRef } from "react";import One from "./One";import Two from "./Two";import Three from "./Three";export default function Home() { const scrollRef = useRef([]); c.. 2022. 12. 13. [React] 가상 DOM 가상 DOM # 가상 DOM의 등장 이유 React 가장 큰 특징은 가상 DOM을 사용한다는 것이다. 가상 DOM을 사용하는 이유를 알기 위하여 우선 브라우저 렌더링 과정을 이해해야 한다. 브라우저는 서버에게 렌더링에 필요한 리소스를 받고, 이를 이용하여 DOM을 생성한다. DOM은 렌더 트리를 구성하고, 이 렌더 트리를 기반으로 HTML 요소가 페인팅된다. 즉, DOM 트리 생성, 렌더 트리 생성, 레이아웃 계산(리플로우), 화면에 그리기(페인트) 과정을 거쳐 화면이 완성되는 것이다. 자세한 내용 : 브라우저 렌더링과 DOM https://inthedev.tistory.com/16 그러나 웹 페이지는 사용자와 상호작용한다. 따라서, DOM은 자주 변화한다. DOM의 변화 하나하나마다 계속해서 페이지를 .. 2022. 12. 5. [React] React Hooks와 useState, useEffect React Hooks와 useState, useEffect # React의 클래스형 컴포넌트와 함수형 컴포넌트 React의 컴포넌트를 작성하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 생명 주기 관련 기능을 사용할 수 있다. 함수형 컴포넌트는 상태값과 생명 주기 관련 기능을 사용할 수 없지만, Hook을 이용하여 이를 해결한다. 클래스 방식보다 함수 방식이 선언이 더 쉽고 메모리를 덜 사용한다는 장점이 있어서 현재는 함수형 컴포넌트 방식을 많이 사용한다. (React 공식 문서에서도 함수형을 권장하고 있다.) # React Hooks 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있도록 추가된 자바스크립트 함수이다. React.. 2022. 12. 4. [React] JSX JSX # JSX란 JSX는 자바스크립트의 확장된 문법이다. 기존의 웹 페이지와는 다르게 html과 자바스크립트를 분리하지 않고, 둘 다 포함하는 컴포넌트라는 것을 사용한다. 간단히 표현하자면 React에서 사용하는 html인데, 자바스크립트 문법이 적용된 것이라고 할 수 있을 것 같다. export default function App() { const text = "hello"; const arr = [0, 1, 2]; return ( {text} {arr.map((item) => {item})} ); } 이렇게 하나의 파일에 html과 자바스크립트가 모두 있다. 또한, 자바스크립트에서 표현된 변수와 함수를 바로 html에 적용할 수 있다. 이렇게 React에서는 JSX로 표현된 html을 사용한다... 2022. 11. 7. 이전 1 2 다음
