useMemo를 사용한 연산한 값 재사용 하기. 이번에는 성능 최적화를 위해 연산된 값을 useMoeo 라는 Hook 을 사용하여 재사용 하는 방법을 알아보겠습니다. 어떠한 상태에 변화가 있을때만 연산해야하는 계산 값들은 따로 설정해주지 않으면 컴포넌트가 리렌더링 될 때마다 계속 같이 실행됩니다. 이런 상황에서는 useMemo 라는 Hook 함수를 사용하면 성능을 최적화 할 수 있습니다. Memo 는 "memoized" 를 의미합니다. 이전에 계사 한 값을 재사용한다는 의미를 갖고 있습니다. useMemo() 사용 첫 번째 파라미터 : 어떻게 연산을 할지 정의하는 함수 두 번째 파라미터 : deps 배열을 넣어준다. (단, 이 배열 안에 넣은 내용이 바뀌면, 등록한 함수를 호출해서 값을 연산해주고 내용이..
| useCallback()을 사용한 함수 재사용 useCallback() 은 useMemo 와 비슷한 Hook 입니다. useMemo : 특정 결과값을 재사용 useCallback: 특정 함수를 새로 만들지 않고 재사용 | useCallback()을 사용하는 이유 ? 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다. 함수를 선언하는 것 만으로는 리소스 낭비가 많지는 않지만, 이런 함수가 많아지면 아무래도 부담이되는 건 사실입니다. 컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는 것 조차 하지 않고 최적화를 진행합니다. 따라서 되도록 최적화를 위해 낭비를 줄여야하는 건 사실이라고 생각합니다. | useCallback() 사용 사용시 주희할 점, 인에서 사용하..
| useEffect 를 활용하여 mount/unmount/update 작업 해보기 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트,언마운트,업데이트 될 경우를 살펴보겠습니다. 마운트란? mount : 컴포넌트가 처음 나타났을 때 unmount : 컴포넌트가 사라질 때 update : 특정 props가 바뀔 때 마운트/ 언마운트 function User({ user, onRemove, onToggle }) { useEffect(() => { console.log(" Mount ! 컴포넌트가 화면에 나타남"); return () => { console.log(" unMount ! 컴포넌트가 화면에서 사라짐"); } }); | useEffect() 사용하기 첫 번째 파라미터 : 함수 두 번째 ..
useRef로 컴포넌트 안의 변수 만들기 컴포넌트에서 특정 DOM을 선택할 때 ref 를 사용해야 합니다. 함수형 컴포넌트에서는 이를 설정 할 때 useRef() 를 사용하여 설정합니다. useRef Hook은 DOM을 선택하는 용도 외에도, 다른 용도가 한가지 더 있습니다. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 입니다. useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않습니다. 일반 컴포넌트의 상태변수와 차이점은 ? 리액트 컴포넌트에서 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링이된 후 업데이트한 값을 조회할 수 있습니다. 하지만, useRef 로 관리한 변수는 바로 조회할 수 있습니다. 다음 값을 관리할 수 있습니다. setTimeo..
리액트에서 훅을 사용하면 엄청 편리하다. 대표적인 몇개의 훅을 살펴보자. useEffect() - componentDidmount역할을 한다. 또한 componentDidUpdate의 역할도 한다. - 2개의 인자를 받는데, 첫 번째는 function으로써의 effect이다. 두 번째는 deps가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변경하도록 활성화 된다. 위와 같은 코드에서 useEffect의 첫 번째 인자로는 함수가, 두 번째 인자로는 Array형태의 변경할 값을 적어주었다. 두 번째 값이 변경될 때 마다 첫 번째의 함수가 계속 실행이된다. 버튼을 클릭할 때 마다 console창에는 "hello"라는 것이 찍히게 된다. 즉, 버튼을 누를 때 number값이 변경되므로, sa..
사용자 이벤트를 만들기 전에 .bind(this){}라는 녀석을 살펴보자. .bind(this)란, 간단하게 말해서 컴포넌트 그 자체를 가르킨다 ex) Component 따라서 bind(this)를 해주는 경우에는 컴포넌트 자체를 심어준다는 의미이다. 그렇다면 그 에서 사용하는 state 값들을 사용할 수 있다. 사용자 이벤트 만들기 먼저, App.js 위와 같은 코드가 있다고 했을 경우에 해당 div 영역에서 onChangePage 라는 사용자 정의 이벤트를 설치했다고 생각하자. Subject.js import React,{ Component} from 'react'; class Subject extends Component{ render() { return ( {this.props.title} {th..
npm install bctypt --save 실행 console창에서 비크립트 다운 해당 사이트에 접속해보면 www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS. www.npmjs.com 먼저 사용법은 sortRounds 를 이용하여 비크립트 자릿수를 설정한 뒤 Salt를 만들고 genSalt를 이용하여 실행합니다. User.js genSalt를 통하여 err가 존재할 경우에는 if문을 통하여 분기시켜줄 수 있다. 만약 err가 없을 경우에는 hash를 실행하는데, myPlaintextPassword 값으로는 mongoose스키마에서 선언한 password값이 올 수 있다. index.js //로그인 시 app.post('/login',(r..
const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ name : { type : String, maxlength : 50 }, email : { type : String, trime : true, }, lastname : { type : String, maxlength : 50, }, role : { type : Number, default : 0 } ,image : String ,token : { type : String }, tokenExp : { type : Number } }) const User = mongoose.model('User',userSchema); module.exports = { User } 중요 :..