분류 전체보기129 [React] 렌더링 최적화하는 방법 1. state 선언은 해당 state를 사용하는 컴포넌트 중 최상위에 선언 리액트는 특정 state가 변경되면 그 state가 선언된 컴포넌트와 그 하위 컴포넌트들을 모두 리렌더링 시킵니다. 따라서 state가 선언되는 위치를 잘 설계하는 것은 리렌더링 횟수에 엄청난 영향을 끼칩니다. 기본적으로 state의 선언위치는 이렇습니다. 해당 state를 사용하는 컴포넌트들을 잘 구분해놓은 뒤 그 컴포넌트들 중 가장 최상위 컴포넌트에 선언합니다. 만약 그 state를 사용하는 최상위 컴포넌트보다 더 상위 컴포넌트에 state를 선언하면 state를 사용하지 않는 더 많은 컴포넌트들이 state변경에 의해 불필요한 리렌더링을 겪게 됩니다. 예를 들어 다음과 같은 컴포넌트 구조가 있다고 합시다. Index ㄴGr.. 2022. 3. 10. [React] CORS 에러 (OPTIONS 요청 발생) 백엔드는 3001포트 프론트는3000 포트로 돌려서 axios 가져오려 할 때마다 cors가 말썽이다. 댓글을 삭제하기 위한 다음과 같이 백엔드 api 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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 // 댓글 삭제 router.route('/reply/delete_reply').get((req, res) => { const idx = req.query.idx; if (pool) { replyDelete(idx, (err, result) => { if (err) { res.writeHead('201', { '.. 2021. 12. 24. [React] 리액트 댓글 좋아요 구현하기 아래는 먼저 페이지의 js이다. frontend/src/user/pages/detailPage.jsx 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 30 31 import React, { useEffect, useState } from "react"; import { Link, useParams } from "react-router-dom"; import ReplyLike from ../components/replyLike; const UploadPage = () => { const param = window.location.search.split('=')[1] // memberIdx (현재 로그인한 사람의 id.. 2021. 12. 23. [Oracle] 오라클 instr() 함수 /* instr(문자열, 검색할 문자, 시작지점, n번째 검색단어) - 찾는 문자의 위치를 반환 - 찾는 문자가 없으면 0을 반환 - 찾는 단어 앞글자의 인덱스를 반환 - 시작지점에 -1을 넣을 경우 뒤에서 부터 시작 */ SELECT instr('Hello Oracle', 'O') as instr FROM dual; -- 7 SELECT instr('Hello Oracle', 'Ox') as instr FROM dual; -- 0 SELECT instr('Hello Oracle', 'Or') as instr FROM dual; -- 7 SELECT instr('Hello Oracle', 'l') as instr FROM dual; -- 3 SELECT instr('Hello Oracle', 'l', 5.. 2021. 8. 12. 이전 1 ··· 4 5 6 7 8 9 10 ··· 33 다음
