띵동

import React, { useState } from 'react'; import styled from 'styled-components'; function CustomRadio() { const fruits = [ {text: '복숭아', value: 0}, {text: '레몬', value: 1}, {text: '사과', value: 2}, ] const [selectedFruit, setSelectedFruit] = useState(null); const onChangeRadio = (e) => { setSelectedFruit(Number(e.target.value)); } return ( { fruits.map((fruit, idx) => ( {fruit.text} )) } ); } expo..

중첩 라우팅(nested routing)이란 여러 유사한 페이지를 필요로 할 때 사용된다. 예를 들어, 회사 정보를 보여주는 /about 페이지가 있는데 멤버 정보를 보여주는 /about/member 페이지와 회사 위치 정보를 보여주는 /about/location 페이지도 만든다고 하면 import React from "react"; import { Route, Routes, BrowserRouter } from 'react-router-dom'; function App() { return ( ); } export default App; 이런 식으로 코드를 작성할 수 있다. 하지만 위 방법이 아닌 중첩 라우팅을 사용하면 라우트 작성이 더 간단해지고, 중첩된 element들을 동시에 보여준다는 장점이 있다..

state로 상태 관리를 하다가 setState를 하여 콘솔에 찍어보면 한 박자씩 느리게 찍히는 경우가 있을 것이다. 이것은 useState가 비동기적으로 처리되기 때문이다. 이를 해결하기 위해서는 useEffect를 사용하거나, setState의 인자로 함수를 넣는 방법이 있다. 1) useEffect의 dependency array를 사용하여 해결 ex) const [url, setUrl] = useState(""); useEffect(() => {}, [url]) 2) setState의 인자로 함수 넣어서 해결 ex) const [url, setUrl] = useState(""); setUrl((preUrl) => preUrl = URL) (위 URL은 함수 실행 시 값을 받아왔다고 가정한 변수이다)