// 차이점 // database.equipments, database.supplies 모두 배열임 1. console.log([ ...database.equipments, ...database.supplies ] ) // 결과 : 하나의 배열에 타입이 다른 두 객체가 묶여서 표현됨 [ { id: 'machanical keyboard', used_by: 'developer', count: 24, new_or_used: 'used' }, { id: 'pen tablet', used_by: 'designer', count: 15, new_or_used: 'used' }, { id: 'notebook', used_by: 'planner', count: 37, new_or_used: 'new' }, { id: ..

- SPA : 페이지가 1개인 어플리케이션, 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여줌, SPA 의 단점은, 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것 입니다. 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문(code splitting 필요) cf> 전통적인 웹 어플리케이션 : 여러 페이지로 구성, 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당

- 파라미터: /profiles/velopert - 쿼리: /about?details=true 1. match : Route 컴포넌트에서 연결하는 컴포넌트로 넘겨지는 정보로, 파라미터를 얻기 위해서는 match.params를 이용 const Profile = ({ match }) => { // 파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조합니다. const { username } = match.params; const profile = profileData[username]; if (!profile) { return 존재하지 않는 유저입니다.; } return ( {username}({profile.name}) {profile.description} ); }; const App =..

- react-router-dom 라이브러리 적용( 사용 금지, 사용하려면 e.preventDefault()와 자바스크립트 주소로 수동 변경 필요) // * App 을 BrowserRouter 로 감싸기 ReactDOM.render( , document.getElementById('root') ); 1. Route : 특정 주소에 컴포넌트 연결하기 - path : 연결시킬 주소 ex> path="/" - component - exact : path가 정확히 일치할 때만 Route 시킬지 결정하는 prop 2. Link : 누르면 다른 주소 연결하기(a 태그와는 다르게 HTML5 History API 를 사용하여 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지는 않습니다.) const App = () =>..

import React, { createContext, useReducer, useContext } from 'react'; // UsersContext 에서 사용 할 기본 상태 const initialState = { users: { loading: false, data: null, error: null }, user: { loading: false, data: null, error: null } }; // 로딩중일 때 바뀔 상태 객체 const loadingState = { loading: true, data: null, error: null }; // 성공했을 때의 상태 만들어주는 함수 const success = data => ({ loading: false, data, error: null })..

1. 커스텀 Hook 이용 import { useReducer, useEffect } from 'react'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: action.data, error: null }; case 'ERROR': return { loading: false, data: null, error: action.error }; default: throw new Error(`Unhandled action type: ${action.type}..