본문 바로가기

Programing/React72

042. React - 라이프사이클 개념리액트의 컴포넌트도 마치 인간처럼 생애주기(life cycle)을 갖는다. 탄생-변화-사망의 단계이다.리액트 컴포넌트의 경우, Mount - Update - Unmount로 표현한다.Mount (탄생)컴포넌트가 탄생하는 순간화면에 처음 렌더링 되는 순간Update (변화)컴포넌트가 다시 재 렌더링 되는 순간재 렌더링 될 때를 의미Unmount (죽음)컴포넌트가 화면에서 사라지는 순간렌더링에서 제외될 때를 의미컴포넌트의 라이프사이클을 관리해야 하는 이유성능을 최적화 하며 웹을 개발할 수 있다.예를 들어 Mount 될 때 서버에서 API를 받아올 수 있고, 컴포넌트가 Update 될 때 어떤 값이 변경되었는지 콘솔에 찍어보며 관리할 수 있고, 컴포넌트가 Unmount 될 때 컴포넌트가 사용하던 메모리를 .. Programing/React 2024. 5. 23.
052. React - 페이지 라우팅 - 동적 경로 동적 경로(Dynamic Segment)란?예를 들어 쇼핑몰에서 1번 상세페이지는 /product/1, 2번 상세피이지는 /product/2가 붙는 것처럼 동적으로 경로가 생성되는 것을 의미함.동적 경로의 방식 2가지URL Parameter/ 뒤에 id를 명시하는 방법.아이템의 id와 같이 변경되지 않는 값을 고유의 경로로 설정하기 위해 사용함.~/product/1~/product/2~/product/3Query String? 뒤에 변수명과 값을 명시하는 방법.포털 사이트에서의 검색어와 같이 수시로 변경되는 값을 주소로 명시하기 위해 사용함.~/search?q=검색어URL Parameter 사용 방법Route path에 :id 명시하기} />해당 컴포넌트로 가서 usePrams 커스텀 훅 import 하.. Programing/React 2024. 5. 23.
051. React - 페이지 라우팅 - 페이지 이동 Link로 이동시키는 법Link 컴포넌트 import하기// App.jsximport { Routes, Route, Link } from "react-route-dom";return문 내부에서 link 컴포넌트 호출하기function App() { return ( Home Diary Detail } /> } /> } /> } /> );}Button으로 이동시키는 법useNavigate 훅 import 하기// App.jsximport { Routes, Route, useNavigate } from "react-route-dom";useNavigate 훅을 변.. Programing/React 2024. 5. 23.
050. React - 페이지 라우팅 - 라우팅 설정 사용할 라이브러리가장 많이 사용하는 라우팅 라이브러리인 react-routing-dom을 이용하여 실습한다.설치 방법npm install react-router-dom의존성과 마찬가지로 프로젝트마다 세팅해주는 것.import하기// main.jsximport { BrowserRouter } from "react-router-dom";// 컴포넌트의 부모 컴포넌트로 감싸기 만들 페이지(컴포넌트) 구상하기만약 메인(홈)을 포함해서 3개의 페이지를 만든다면, "/" : Home.jsx"/Diary" : Diary.jsx"/Detail" : Detail.jsx위와 같이 src 폴더 내에 pages 폴더를 만들고 컴포넌트들을 만들어 준다.그리고 App.jsx 컴포넌트 내에 모두 import 해준다.imp.. Programing/React 2024. 5. 23.
049. React - 페이지 라우팅 - 소개 page-routing의 개념Single Page Application을 만드는 React.js는 정말로 하나의 페이지만 갖고 있는 것이 아니라 여러 html을 작성하더라도 마치 하나로 합쳐진 듯 보여주는 사용성을 보여주는 라이브러리일 뿐이고 실제로는 하나의 웹 사이트나 애플리케이션에 여러 개의 페이지가 존재한다.이 페이지들을 html의 태그처럼 하나로 이어주는 역할을 page-routing이라 한다.server는 웹 사이트를 구성하는 여러 개의 html 페이지를 갖고 있다가 서버 사이드 렌더링 방식으로 사용자가 요청한 페이지를 띄워준다.서버 사이드 렌더링은 서버에서 자바스크립트 등 웹 페이지를 구성하는 모든 요소를 직접 렌더링 한 뒤 사용자에게 화면을 넘겨주는 방식이고, 반대 방식으로는 클라이언트 사.. Programing/React 2024. 5. 22.

티스토리툴바