FE - Tools23 [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. [Next.js] Next.js 알아보기 Next.js 알아보기 # Next.js란 Next.js는 React를 효율적으로 이용할 수 있도록 도와주는 React의 프레임워크이다. Next.js 서버 측에서 React 코드를 실행한 뒤 pre-rendering하여 HTML을 생성하여 브라우저에게 보낸다. 그 후 브라우저에서 React를 사용해 웹 페이지를 완성하는 과정으로 작동한다. Next.js의 특징을 살펴보며 어떤 장점이 있는지 알아보자. # Next.js 특징 1. SSR (Server Side Rendering) CSR 방식으로 렌더링되는 React와는 다르게, Next.js는 SSR 방식으로 렌더링할 수 있게 해준다. CSR은 첫 로딩 시간이 길고 SEO(검색 엔진 최적화)에 불리하다는 단점이 있는데, SSR을 이용하면 웹 페이지 접속.. 2022. 12. 8. [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 3 4 다음
