리액트 라우터 부가기능 useNavigate Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야하는 상황에 사용 //Layout.js import { Outlet, useNavigate } from 'react-router-dom'; const Layout = () => { const navigate = useNavigate(); const goBack = () => { // 이전 페이지로 이동 navigate(-1); }; const goArticles = () => { // articles 경로로 이동 navigate('/articles'); }; const goArticles2 = () => { navigate('/articles', { repla..

공통 레이아웃 컴포넌트 헤더, 푸터등의 공통적으로 보여주는 레이아웃의 경우 헤더 컴포넌트, 푸터 컴포넌트를 따로 만든 후 각 페이지에서 컴포넌트 재사용 혹은 중첩라우트를 이용해 구현 //Layout.js import { Outlet } from 'react-router-dom'; const Layout = () => { return ( Header ); }; export default Layout; //App.js mport { Route, Routes } from 'react-router-dom'; import Layout from './Layout'; import About from './pages/About'; import Article fr..

라우팅 라우팅이란 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 리액트의 라우트 시스템 리액트 라우터 (React Router) 가장 오래된 리액트의 라우팅 관련 라이브러리 컴포넌트 기반으로 라우팅 시스템 설정 Next.js 리액트 프로젝트의 프레임워크 서버 사이드 렌더링 등 다양한 기능 제공 리액트 라우터 대안으로 많이 사용하는 프레임워크 싱글페이지 어플리케이션 한 개의 페이지로 이루어진 어플리케이션 차이점 멀티 페이지 다른페이지로 이동할 때마다 새로운 HTML을 받아온다 페이지를 로딩할 때마다 서버에서 CSS, JS 등의 리소스를 전달받는다 각 페이지마다 다른 html을 만들어 제공하거나, 템플릿 엔진 사용 새로운 페이지를 보여줄 때마다 서버에서 준비, 서버측 자원 사용 트래픽 증가 싱글..

일반 CSS Sass CSS 전처리기 확장된 CSS문법 CSS 모듈 CSS클래스가 다른 CSS클래스의 이름과 충돌하지 않도록 파일마다 고유 이름을 자동으로 생성 styled-components 스타일을 자바스크립트 파일에 내장시키는 방식 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만듦 일반 CSS CSS클래스를 중복되지 않게 만들어야 한다 App.js / App.css 컴포넌트이름으로 css를 만든다 BEM네이밍 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 명명하는 방식 card_title-primary 등 CSS Selector CSS클래스가 특정 클래스 내부에 있는 경우에만 스타일 적용 가능 .App .logo{} .App { text-align: center; } .App .lo..

함수형 컴포넌트에서도 상태관리를 할 수 있게 해준다 useState 가장 기본적인 Hook 함수형 컴포넌트에서 상태를 가변적으로 지닐 수 있게 해준다 mport React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; const[valye,serValue] = useState(0); useState함수의 파라미터에는 상태의 기본값 함수 호출 시 배열 반환 첫번째 원소는 상태 값, 두번째 원소는 상..

모든 컴포넌트에는 라이프사이클이 존재 시작 : 페이지에 렌더링 되기전 준비과정 끝 : 페이지에서 사라질 때 컴포넌트를 처음 렌더링하거나 업데이트 할때, 특정 작업을 처리해야할 경우 라이프사이클 메서드 사용 라이프사이클 메서드 클래스형 컴포넌트에서만 사용 가능 함수형 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업 처리 종류 3가지 카테고리 (마운트, 업데이트, 언마운트) 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것 호출되는 메서드 constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps props에 있는 값을 state에 넣을 때 사용하는 메서드 render 준비한 UI를 렌더링 componentDidMount 컴포넌트가 ..