Develop record

//필요할 때만 렌더링하기 : memo (자식컴포넌트가 렌더링시 시간을 많이 지연시킬경우 재렌덜이을 하지 않기 위해 사용) // CHILD로 전송되는 props가 변할 때만 재렌더링 // props 가 길고 복잡할때는 쓰지말기 꼭 필요한 무거운 것에만 let Child = memo(function (){ return Child }) 함수 function(){ return 10억번돌린 결과 } function Cart(){ let cart = useSelector((state)=>{return state.cart}) let user = useSelector((state)=>{return state.user}) let dispatch = useDispatch() let [count, setCount] = u..

app.js import logo from './logo.svg'; import './App.css'; import {Button, Navbar, Container, Nav, Col, Row} from 'react-bootstrap' import img from './img/react-img.png'; import {Suspense, lazy, useState } from 'react'; import data from './data.js'; import Main from './routes/main.js'; //import Detail from './routes/detail.js'; import Event from './routes/event.js'; import About from './routes/ab..

state 변경 1. store.js 에서 state 변경 함수 만들기 2. export let user = createSlice({ name : 'user', initialState : 'kim', reducers : { // state 수정함수 만들기 함수명1(state){ // state : 기존 state return '변경값' // 변경 state }, 함수명2(){ return } } }) let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ return 'john' } } }) // state 변경 함수 export 해서 다른 곳에서 사용하기 좋도록 export let {expo..

props 없이 state 공유가능 공유가 필요없을 경우 그냥 useState() 사용하기 Redux 셋팅 1. 아무위치에 store.js 파일 만들기(state 들을 보관하는 파일) import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) 2. index.js 에서 store.js - import 3. 으로 감싸기 => + 모든 자식 컴포넌트에서 store.js 에 있는 state 사용가능 import { Provider } from 'react-redux'; import store from './store.js'; root.render( ); state 사용법 1. store 에 st..

props : 부모 - 자식 관계에서만 전송가능 Context API : props 전송없이 state 사용 가능 (사용 잘 하지않음) context : state 보관함 Context API state 공유 1. context 만들기 : export let 변수명 = React.createContext(); 2. state 공유 원하는 곳을 으로 감싸기 3. 공유 원하는 state 를 value 안에 적기 ( 로 감싼 컴포넌트 + 그 자식 컴포넌트 : props 없이 state 직접 사용가능 state 사용 1. 만들어둔 Context를 import 2. useContext(import한 Context) 3. 변수에 담아서 가져다 쓰거나 하기 모든 자식 컴포넌트도 useContext..

전환 애니메이션 1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가 4. 원할 때 2번 탈부착 Detail.js import { useEffect, useState } from "react"; import { Container, Row, Col, Nav } from "react-bootstrap"; import { useParams } from "react-router"; import styled from "styled-components"; function Detail(props){ let [tab, setTab] = useState(0); let [fade, setFade] = useSt..

import { useEffect, useState } from "react"; import { Container, Row, Col, Nav } from "react-bootstrap"; import { useParams } from "react-router"; import styled from "styled-components"; function Detail(props){ let [count, setCount] = useState(0) let [remove, setRemove] = useState(true) let [tab, setTab] = useState(0); useEffect(()=>{ let a = setTimeout(()=>{setRemove(!remove)}, 2000) },[count])..

새로고침 없이 get/post 요청 가능 get : 데이터 가져올 때 post : 데이터 보낼 때 서버와 문자열로만 주고 받기 가능 -> axios 사용시 json 에 " { " " : " " } " 형태를 자동으로 array / object 로 변환해줌 import { Container,Row,Col} from "react-bootstrap"; import { Link } from "react-router-dom"; import axios from "axios"; function compare(me, you){ return me.title.localeCompare(you.title) } function Main(props){ const sort = ()=>{ let copy = [...props.sho..

컴포넌트의 Lifecycle mount : 페이지에 장착 update : 재 랜더링 unmount : 필요없을 경우 제거 useEffect 랜더링 후 (html 코드가 다 실행 된 후) 실행 됨 => 시간이 오래걸리는 어려운 작업을 useEffect () 안에 넣기 ( 어려운 연산, 서버에서 데이터 가져오는 작업, 타이머장착하는 작업 ) import { useEffect, useState } from "react"; import { Container, Row, Col } from "react-bootstrap"; import { useParams } from "react-router"; import styled from "styled-components"; function Detail(props){ le..

css 오염방지 1. styled-components 사용하기 2. 컴포넌트명.module.css -> 컴포넌트명.js 에서 import 해서 사용하면 해당 컴포넌트명.js 에만 적용됨 import { Container, Row, Col } from "react-bootstrap"; import { useParams } from "react-router"; import styled from "styled-components"; // porps로 사용하기 let YellowBtn = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white':'black'}; padding : 10px;..