전체 글 (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폴더 안.. 이전 1 ··· 8 9 10 11 12 13 14 ··· 56 다음
