반응형 Framework/React14 React.memo, useCallback, useMemo 이용한 최적화 [React.memo] : 렌더링 최적화 하나의 view 페이지에서 컴포넌트를 각 분리해서 사용할 때는 재사용성을 위해서도 이지만 각 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 예를들어 state값을 사용하는 하나의 자식 컴포넌트와 state를 가지고 있는 부모 컴포넌트만 렌더링이 되어야 하는데 react의 주된 특징(?)중 하나라고 볼 수 있는, 부모 컴포넌트에서 import된 (렌더링 하지 않아도 되는) 모든 컴포넌트까지 같이 렌더링이 된다. 불 필요한 컴포넌트까지 렌더링이 지속되면 성능 저하의 주요인이 되기 때문에 이를 위해 react.memo를 적용하므로써 문제를 해결 할 수 있다. React.memo의 적용방법: 원하는 컴포넌트(예제에서는 satate에 주 사용되는 컴포넌트) 에 React.. 2023. 7. 24. params를 쓸까 query를 쓸까? (참고로 이 글은 파라미터와 쿼리스트링에 대한 정보가 담긴 글은 아닙니다ㅋㅋ) 포트폴리오에 readme를 모달로 띄워놓은 상태였다. 따로 만든 이력서에 플젝설명을 또다시 적는 삽질보다는 해당 링크를 거는게 낫지 않겠는가 싶어서 호기롭게 시작했지만, 코린이에게는 역시나 고비가 왔다. 내 포폴은 SPA이다. 컴포넌트 하나에만 route를 해놓은 상태였다. 제일 먼저 생각한 방법 1. params가 있을 때 모달을 띄울때 걸어놓은 setState 상태를 바꾸자 라는 방법이였다. Layout컴포넌트는 nav와 footer는 공통 Outlet 갖고 있는 화면 전체 레이아웃이다. 처음에는 그냥 layout의 path에 :parmas를 했지만 아예 화면이 보이질 않았다. 그래서 따로 Project 컴포넌트를 path.. 2022. 12. 13. React 로그인 API _ 1 (앞서 회원가입 로직을 완료한 상태) * 추가글: 정리를 하다보니까 이해가 조금 더 편한 상태가 되려면 server부터 참고해주세요. 먼저 클라이언트 //[client] signin.jsx const onValue = (data) => { axios.post('http://localhost:3000/auth/login', { email: data.email, pw: data.pw }).then(res => { localStorage.setItem('토큰', res.data.userToken) // header에 토큰 넣는 로직 setInterceptor(res.data.userToken) history('/main') }) } // 헤더에 토큰을 넣어줌 import axios from 'axios'; e.. 2022. 10. 31. React 회원가입 API (로그인 기능 전) (React Hook Form을 가지고 회원가입, 로그인페이지 유효성 검증까지 해놓은 상태임) 1. express모듈을 설치했고, Mongoose library로 mongoDB를 연결했다. 2. model과 schema를 생성 3. clinet - server 통신 test해봄 (body-parser 설치 후) 4. mongoURI보호를 위해 환경 변수를 나눠주었다. 5. bcrypt를 통해 비밀번호 암호화 먼저 클라이언트 //[client] signup.jsx const onValue = (data) => { axios.post('http://localhost:3000/auth/register', { email: data.email, pw: data.pw, pwComfirm: data.pwComfirm.. 2022. 10. 31. 이전 1 2 3 4 다음 728x90 반응형
