React

import "./App.css"; import { useState } from "react"; function App() { let [titleList, setTitleList] = useState(["성수맛집추천", "헤어샵추천", "자바스크립트독학"]); let [likes, setLikes] = useState([0,0,0]); let [modal, setModal] = useState(false); let [title, setTitle] = useState(0); let [inputValue, setInputValue] = useState(''); return ( 블로그 { titleList.map(function(a,i){ return( { setModal(!modal); setTitle(i)..

1. 먼저 터미널에 styled-component를 설치해준다. npm install styled-components 2. styled-component를 사용할 js파일에 import 해준다. import styled from 'styled-components' 3. 아래와 같이 YellowBtn이라는 컴포넌트를 만든다고 생각하고, styled.button 뒤에 백틱 ``을 열어 그안에 css파일처럼 속성을 적어준다. 다음에 컴포넌트를 삽입할 함수 안에 으로 넣어준다. import styled from 'styled-components'; let YellowBtn = styled.button` background : yellow; color : black; padding : 20px; ` functio..

1. 데이터에 맞게 상품의 정보를 보여주고 싶은데, 만약 상품이 100개 있다면..? 일일이 Route 를 써서 상세페이지를 만들어주기엔 한계가 있다. 데이터는 아래와 같다고 설정해보자. 각각 ID마다 상품명, 상세설명, 가격이 적혀있다. let data = [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 2. 함수의 pr..

1. 먼저, 라우터를 사용하기 위해서 리액트 상단에 import를 해준다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'; 2. Link 태그를 활용해서 웹페이지를 만들고 싶다면, Link를 열고 onClick API를 활용해서 함수를 열어주고 navigate 안에 경로를 적어주면 된다. {navigate('/detail'} }>Detail 3. 기존에 라우터를 활용했을 때에는, Route들을 하나씩 삽입해서 넣는 식으로 활용했었다. 그런데 웹페이지 안에 또 다른 웹페이지를 넣고 싶을 땐 어떻게 해야할까? --> Route안에 또다른 Route를 생성해주면 된다. 4. 그런데, 막상 /detail/member 홈페이..