React.js (17) 썸네일형 리스트형 페이지 라우팅 1 - React Router 기본 $ npm install react-router-dom@6 import './App.css'; import {BrowserRouter, Route, Routes} from "react-router-dom"; import RouteTest from './components/RouteTest'; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; function App() { return ( App.js );} export default App; .App { text-align: center; } .App-logo { heig.. 페이지 라우팅 0 - React SPA & CSR 페이지 라우팅 : 단순히 어떤 요청에 따라 어떤 페이지를 돌려줄지 결정하는 과정들을 일컫음 리액트 앱이 알아서 페이지를 업데이트 시킴. 브라우저가 알아서 처리하니, 서버 대기 시간이 걸리지 않음. 데이터가 필요한 경우에는 서버와 데이터만 요청하고 전달 받게 된다. SPA방식을 사용한 페이지 이동은 일단 웹 페이지 먼저 바꾸고, 로딩 적게 하고, 데이터가 들어오면 그 때 데이터를 보여주면 된다. CSR (Client Side Rendering) : 클라이언트 쪽에서 알아서 페이지를 랜더링 하는 방식, 클라이언트 쪽에서 직접 랜더링 최적화 2 - 컴포넌트 재사용 setCount(10)이 실행되면서 App 컴포넌트의 count state의 값이 바뀌게 되고, state가 업데이트 되었기 때문에 해당 state를 가진 컴포넌트인 App 컴포넌트는 리랜더링 되고, prop인 count의 값도 바뀌게 되며, CountView 컴포넌트만 리랜더 될 거 같은 기대를 깨고 두 개의 자식 컴포넌트가 모두 리랜더 된다. 부모 컴포넌트가 리랜더 되면, 자식 컴포넌트들 또한 리랜더가 되기 때문에 textView 컴포넌트 또한 강제로 리랜더 된다. --> 코드의 다음 라인인 setText의 결과는 ? App 컴포넌트는 state가 바뀌어서 리랜더가 될 것이고, 자식 컴포넌트 둘 다 다시 랜더링이 되면서 연산의 낭비가 발생 자신과 관련 없는 업데이트로 자신도 업데이트 되어 버린다. 함.. 최적화 1 - 연산 결과 재사용 (useMemo) import { useEffect, useMemo, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then((res) => res.json()); const initData = res.s.. React에서 API 호출하기 React Lifecycle 제어하기 - useEffect useEffect 사용 배열에 있는 값이 하나라도 변화하면, 첫 번째 parameter인 콜백 함수가 다시 수행 된다. 두 번째 parameter 배열에 변화하는 값을 넣어 놓으면, 콜백 함수가 그 값이 변화할 때마다 계속 수행 되는 것 ! import React, {useEffect,useState} from 'react'; const Lifecycle = () => { const [count, setCount] = useState(0); const [text, setText] = useState(""); useEffect(() => { console.log("Mount"); }, []); useEffect(() => { console.log("Update"); }) return ( {count} se.. 리스트 데이터 삭제하기 각각의 아이템들에 '삭제' 버튼을 생성 삭제하기 버튼을 누르면, 이전처럼 App 컴포넌트가 가지고 있는 data의 State를 바꿔줘야 한다. onDelete() 생성 배열 요소의 Id를 onDelete함수에 전달할 수 있어야 하며, DiaryItem이 onDelete()함수를 호출할 수 있어야 한다. DiaryItem의 부모인 DiaryList props로 onDelete 함수를 내려준 다음에, DiaryList에서는 부모로부터 onDelete props를 받아서 내려줘야 한다. import React, {useRef, useState } from "react"; const DiaryEditor = ({onCreate}) => { // onCreat 함수를 Props으로 전달 받음 const autho.. React에서 배열 사용하기 2 - 데이터 추가하기 React의 상태인 State를 Editor와 List의 공통 부모를 끌어올려서 해결할 수 있다. DiaryEditor, DiaryList 컴포넌트의 공통 부모인 App 컴포넌트가 일기 데이터를 State로 배열 형식으로 가지고 있고, 이 데이터 State의 값을 DiaryList에게 전달하면서, 리스트를 렌더링하게 하고, [data]라는 State를 변화시킬 수 있는 상태 변화 함수인 setData 상태 변화 함수를 DiaryEditor 컴포넌트에게 Props으로 전달해주기만 하면 된다. import {useRef, useState} from "react"; import './App.css'; import DiaryEditor from './DiaryEditor'; import DiaryList fro.. 이전 1 2 3 다음
