컴포넌트의 Lifecycle 페이지에 장착되기도 하고(mount) 가끔 업데이트도 되고(update) 필요없으면 제거되고 (unmount) 위의 내용을 알면 중간중간 간섭이 가능하다. (코드실행) 예전 리액트 컴포넌트 문법은 이렇게 코딩이 가능했다. class Detatil2 extends React.Component{ componentDidMount(){ //컴포넌트 mount시 여기 코드 실행됨 } componentDidUpdate(){ //컴포넌트 update시 여기 코드 실행됨 } componentWillUnmount(){ //컴포넌트 unmount시 여기 코드 실행됨 } } 요즘 문법으로는 useEffect를 제공한다. (mount, updatet 코드를 실행해준다.) useEffect(()=>..
npm install styled-components 를 입력해서 설치한다. import styled from 'styled-components'; 사용하려는 js에 임폴트 한다. 만약 이쁜 버튼을 만들고 싶다면? import { useParams } from "react-router-dom"; import styled from 'styled-components'; let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` let Box = styled.div` background : grey; padding : 20px; ` function Detail(props){ let {id} = useParams(); ..
이렇게 url 중에 :id를 넣으면 import { useParams } from "react-router-dom"; function Detail(props){ let {id} = useParams(); console.log(id); return ( {props.shoes[id].title} {props.shoes[id].content} {props.shoes[id].price} 주문하기 ); } export default Detail; useParam();을 이용해서 받을 수 있다.
페이지 나누는 법 (리액트 사용) 1. 컴포넌트 만들어서 상세페이지 내용 채움 2. 누가 /detail접속하면 그 컴포넌트 보여줌 이걸 도와주는 라이브 러리를 설치한다. (react-router-dom) npm install react-router-dom@6 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); BrowerRouter 태그로 App을 감싸준다. 그 후에 App.js에 다음 라이브러리를 임폴트 시킨다. import { Routes, Route, Link } from 'react-router-dom' 사용하는 방법은 이렇다 return ( import './App.css'; import {Navba..
- Total
- Today
- Yesterday
- thymleaf
- rejectValue
- filter
- hypertexttransferprotocol
- 항해99
- Intercepter
- 컨트
- 백엔드 개발자 공부
- 예외처리
- exception
- 스프링공부
- react실행
- ArgumentResolver
- SpringBoot
- 인터셉터
- 향해99
- Java
- HTTP
- reject
- 향해플러스백엔드
- React
- 향해플러스
- jpa api
- JPA
- 로그인
- 항해플러스
- 백엔드 개발자 역량
- 리터럴
- 스프링부트
- BindingResult
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |