전체 글 (166) 썸네일형 리스트형 상세 페이지 생성하기(2) - Damage Relations Damage Relations 컴포넌트 생성하기 import React, {useEffect, useState} from 'react' const DamageRelations = ({damages}) => { const [damagePokemonForm, setDamagePokemonForm] = useState() useEffect(() => { const arrayDamage = damages.map((damage) => separateObjectBetweenToAndFrom(damage)) // type이 2개인지 1개인지 구분해서 데이터 가공 if(arrayDamage.length === 2) { const obj = joinDamageRelations(arrayDamage) setDamagePo.. useRef useRef를 이용해 변수를 관리할 수 있습니다. useRef란? 변수 관리 특정 DOM을 선택할때 사용하는 React Hooks입니다. const ref = useRef(value) {current: value} ref.current === value useRef vs useState vs let state를 사용하면 state가 변경되면 컴포넌트가 다시 렌더링 되지만 ref는 렌더링되지 않습니다. 변수는 컴포넌트가 렌더링되면 다시 초기화됩니다. ref는 생명주기 동안 값은 유지됩니다. Forward Ref 부모 컴포넌트의 ref를 자녀 컴포넌트에 넘겨주고 싶을 때는 그냥 ref를 사용하면 error납니다. 해결법: 전달할 때 꼭 ref란 이름으로 전달하고 싶으면, 자식 컴포넌트에 export defa.. 상세 페이지 생성하기(1) React Router Dom 적용하기 src폴더 안에 pages폴더 만들어서 router를 관리합니다. 기존 App.jsx파일의 내용은 MainPage폴더의 index.jsx파일에 담겠습니다. import시 경로를 좀 수정해야 합니다. import React from 'react' import { BrowserRouter, Routes, Route } from 'react-router-dom' import MainPage from './pages/MainPage' import DetailPage from './pages/DetailPage' const App = () => { return ( ) } export default App App.jsx파일에 router 적용합니다. components폴더 안.. React Router Dom React Router Dom React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있습니다. Single Page Application(SPA) React는 SPA이기때문에 하나의 index.html 템플릿 파일을 가지고 있습니다. React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는 데 도움을 주게 됩니다. React Router Dom 설치 npm install react-router-dom --save React Router Dom 설정 앱 어디에서나 React Router를 사용할 수 있도록 설정을 해야 합니다. src폴더에서 index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성요.. Axios Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. axios 사용 방법 axios 모듈 설치 => npm install axios --save 사용시 axios.get('https://api.pokeapi.org...') Vite vite 문서 vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 Feedback 속도의 엄청난 개선입니다. vite vs create react app vite create react app 설치 시간 약 30초 약 1분 40초 file size 45MB 221MB build file size 150KB 553KB 메인 페이지 생성하기 Vite을 이용한 React 생성 npm init vite 위 코드를 통해 vite을 이용해 react 생성합니다. project name은 react-pockmon-app으로 지어줬고, framework는 react, variant는 JS입니다. npm install axios react-router-dom npm install -D autoprefixer postcss tailwindcss 필요한 패키지 설치합니다. npx init tailwindcss 위 명령어를 통해 tailwindcss 실행합니다. /** @type {import('tailwindcss').Config} */ module.exports = { content: [ // './src/**/*.{js, jsx, ts, tsx}', '.. Typescript 기본 배우기(2) 호출 시그니처, 인덱스 시그니처 이 함수의 타입을 재사용할 수 있습니다. 위에 빨간 박스가 호출 시그니처입니다. 인덱스 시그니처는 객체와 배열을 위한 시그니처입니다. 객체에 어떤 타입을 명확하게 더 추가될지 몰라서 [key:string] : unknown방식으로 인덱스 시그니처를 사용합니다. 함수 오버로딩 左) 같은 로직 및 매개변수를 갖고 있는 함수 2개가 있습니다. 右) 두 함수를 하나로 만듭니다. 타입만 변경하면 됩니다. 접근 제어자 public default 값이며, 어디서나 접근 가능 protected 클래스 내, 상속받은 자식 클래스에서 접근 가능 private 클래스 내에서만 접근 가능 Generic 기본 generic을 사용하면 재사용성이 높은 함수와 클래스를 생성할 수 있습니다. any처.. Typescript 기본 배우기(1) Typescript란? TypeScript는 JavaScript에 타입을 부여한 언어입니다. JavaScript의 확장된 언어(superset)라고 볼 수 있습니다. TypeScript는 JavaScript와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(compile)이라고 부릅니다. TypeScript는 정적 타입(static)이며 코드 작성 단계에서 오류를 확인할 수 있습니다. JavaScript는 동적 타입(dynamic)이며 런타임에서 동작할 때 오류를 확인할 수 있습니다. Typescript Type Type이란, 그 value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법입니다. TypeScript는 JavaScript에서 기본으로 제공하.. React app 성능 개선하기 보호되어 있는 글입니다. 이전 1 2 3 4 5 6 7 ··· 17 다음
