useEffect코드는 페이지가 로드된 다음 실행되는 코드임. 서버로부터 불러오는 작업이나, 기타 복잡하고 시간 오래걸리는 함수들은 여기에 넣어주면 사용자가 좀더 빠르다고 체감이 가능함. 사용방법은 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } 요렇게 사용하면 되고, 실제로 2초후 사라지는 안내문을 만들어보자. let YellowBox = styled.div` background : yellow; height : 100px; width: 100%; font-size:30px; ` functi..
CSS대신에 아래처럼 JS파일 안에 css스타일링을 할 수 있고 심지어 props(약간 사용법 다름 유의)로 조건식등을 넣어서 스타일링도 가능함. 터미널에 아래 입력해서 설치해줌 npm install styled-components 근데 설치가 안될수 있음! (최근 버전이 npm과 충돌이 있는듯 함. 이 경우 아래 처럼 입력 yarn add styled-components 아래처럼 사용. 이렇게 컴포넌트에 넣어서 사용도 가능함. import styled from 'styled-components'; let YellowBtn = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white'..
기본셋팅 터미널에서 router설치 npm install react-router-dom@6 index.js import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); app.js import { Routes, Route, Link } from 'react-router-dom' 기본셋팅은 끝. 페이지 주소, 내부 내용 설정 app.js 아래와 같이 로 감싸준 형식 내부에서 로 지정해줌. 이게 위치한 곳에서 html을 생성하므로, navbar 바로 아래에 작성함. 상세페이지 같은건 map돌려서 생성도 가능함. // 이걸로 감싸줌 /..
데이터가 너무 많거나 등등 파일을 분리하는 경우 불러오는 방법을 크게 두가지로 사용할 수 있음. 1. default export 대부분 이걸 사용하며, 모듈에서 한가지 주요한 것을 내보낼때 사용함. data.js 생생하고 아래와 같이 작성 let a = 10; let b = 20; 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 }..
컴포넌트는 자주 사용하는 html을 하나의 로 만들어주는 react의 문법. 컴포넌트 용도 1. 반복적인 html 축약시 2. 큰 페이지들 3. 자주 변경되는 것들 (성능상) 우선 3스텝으로 만듬. 1. function만들기 function App()밖에서 만들기. 함수명은 대문자로 시작함. function Modal() { return ( title date content ) } 2. return() 안에 html 담기 3. 써서 사용하기. function App() { return ( 중략 {글제목[2]} 2월 17일 발행 ) } 주의사항 : 최종 태그는 1개가 되어야함.(fragment사용가능) 여러가지 형태 가능함. function Modal(){ return ( ) } let Modal = ()..
아래와 같은 state가 있다. let [title, setTitle] = useState(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']); 이걸 버튼을 누를때 값을 변경하려고 할때, { setTitle(title[0] = '다람쥐 코트 추천'); }} 이런 식으로 하면 이런식으로 변경이 된다. 왜냐하면 위에선 title[0]번째에 다람쥐코트추천을 할당한뒤, 그 값 자체를 title에 할당해버리기 때문에, 결국 index0 값이 전체를 덮어버린다. setTitle('다람쥐 코트 추천'); 이거랑 같은 효과가 나는것이다. 정확하게 하려면 { setTitle(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']); }} 이렇게 변경 할것 안할것 전부다 할당해주어야 ..
state 만드는법 let [제목, 제목설정] = setState(값들) //값은 원시요소 말고도 배열, 오브젝트도 들어갈 수 있다. 사용할때 return ( { 제목 } //변경은 아래와 같이 { set좋아요(좋아요 + 1) }}>👍 {좋아요} ) props 전송하는법 function App(){ let [index, setIndex] = setState(0); let [제목, 제목설정] = setState(['다람쥐 코트 추천', '고양이 코트 추천', '강아지 신발 추천']) return( ); } function Modal(props){ return( {props.제목[props.index]} 날짜 상세내용 ) } // [0, 1, 2, 3, 4].map((a)=>{ }) 컴포넌트 만드는 법 작성중~
props로 별걸 다 전송 가능. ('yellow') 말고 "yellow"로 전송도 가능. import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천']) let [좋아요, set좋아요] = useState([0, 0, 0, 0]); let [modal, setModal] = useState(true); let [index, setIndex] = useState(0); //1. array의 자료 갯수만큼 함수안의 코드 실행 //2. 함수의 파라미터는 array내부의 ..
import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천']) let [좋아요, set좋아요] = useState(0); return ( 블로그 { //1 depth 깊은복사 let 제목정렬 = [...제목].sort(); 제목변경(제목정렬); }}>제목 정렬! {제목[0]} { set좋아요(좋아요 + 1) }}>👍 {좋아요} 2월 11일 발행 {제목[1]} { //1 depth 깊은복사 let copy = [...제목];..
JSX 문법 1. html에 class 넣을 땐 className JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호} function App(){ let post = '강남 우동 맛집'; return ( 블로그임 { post } ) } JSX 문법 3. html에 style속성 넣고싶으면 / 카멜케이싱, 중괄호 안에 자료형으로 넣음! import './App.css'; 열어서 하기 귀찮을때 글씨 import logo from './logo.svg'; import './App.css'; function App() { return ( 블로그 글 제목 2월 11일 발행 ); } export default App; return()안에는 태그 병렬 기입 금지.(제일 부모 태그만 하나 만들고 하위에 만들면..
