dev_0hoon

서버야 웹툰 줘 1. 방법(GET/POST) 2. 어떤자료(URL) 보내달라 데이터를 받을 때에는 GET 데이터를 줄 때에는 POST ajax중 라이브러리 axios를 사용하겠다. npm install axios 터미널에 입력해서 인스톨 받아준다. app.js 상단에 추가 import axios from 'axios'; 사용방법 { //axios 사용 axios.get('https://codingapple1.github.io/shop/data2.json').then((result)=>{ let data = result.data; let copy = [...shoes,...data]; //기본 배열에 추가하는 방법 setShoes(copy); }) }}>버튼 그 외에 Post 등의 요청 { //axios ..

컴포넌트의 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..

{console.log(e.target.value)}}> 이벤트 안에 매개변수 e를 잡으면 안의 함수에서 e.target.value로 input의 value값을 가져올 수 있다. {setModal(!modal); setTitle(i)}}>{a} { let dda = [...따봉]; dda[i] += 1; 따봉변경(dda); e.stopPropagation(); }}> 👍 {따봉[i]} 2월 17일 발행 위의 코드의 경우 span을 클릭해도 3번의 이벤트가 일어난다 span이벤트-> h4 이벤트 -> div 이벤트 순이다. 클릭이벤트는 상위 html로 퍼진다. 이것을 이벤트 버블링이라 한다. 이걸 막기 위해서는 원하는 이벤트에 e.stopPropagation()을 사용하면 된다. 같은 이벤트안에서 스테이트..

컴포넌트 안에 파라미터 처럼 데이터를 이동 시킬 수 있다. 부모에서 자식까지만 가능하며 자식은 부모에게 줄 수 없다. 상위 컴포넌트가 app이라면 app안의 modal 안에는 값을 줄 수 있다. { modal == true ? : null } function Modal(props){ return( {props.글제목[props.title]} 날짜 상세내용 { let copy = [...props.글제목]; copy[0] = '여자 코트 추천'; props.글제목변경(copy); }}>글수정 ) } Modal 안에 파라미터의 이름을 정한 뒤 (보통 props라 부른다) 데이터를 꺼내서 쓴다.