리액트20 useCallback()이란? | useCallback()을 사용한 함수 재사용 useCallback() 은 useMemo 와 비슷한 Hook 입니다. useMemo : 특정 결과값을 재사용 useCallback: 특정 함수를 새로 만들지 않고 재사용 | useCallback()을 사용하는 이유 ? 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다. 함수를 선언하는 것 만으로는 리소스 낭비가 많지는 않지만, 이런 함수가 많아지면 아무래도 부담이되는 건 사실입니다. 컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는 것 조차 하지 않고 최적화를 진행합니다. 따라서 되도록 최적화를 위해 낭비를 줄여야하는 건 사실이라고 생각합니다. | useCallback() 사용 사용시 주희할 점, 인에서 사용하.. 2021. 2. 10. useEffect()란? | useEffect 를 활용하여 mount/unmount/update 작업 해보기 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트,언마운트,업데이트 될 경우를 살펴보겠습니다. 마운트란? mount : 컴포넌트가 처음 나타났을 때 unmount : 컴포넌트가 사라질 때 update : 특정 props가 바뀔 때 마운트/ 언마운트 function User({ user, onRemove, onToggle }) { useEffect(() => { console.log(" Mount ! 컴포넌트가 화면에 나타남"); return () => { console.log(" unMount ! 컴포넌트가 화면에서 사라짐"); } }); | useEffect() 사용하기 첫 번째 파라미터 : 함수 두 번째 .. 2021. 2. 8. [React]컴포넌트 이벤트 만들기 사용자 이벤트를 만들기 전에 .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.. 2020. 11. 21. [React]Bcrypt로 비밀번호 암호화 하기 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.. 2020. 11. 15. [React]Component문법 치환해서 넣어주는 것 = component 즉, 하나의 HTML덩어리로 만들어 놓은 것. 관습(유의사항) 1.이름은 소문자보다 대문자로 시작 ( 소문자면 랜더링이 안됩니다.) 2.return()안에 있는 건 태그 하나로 묶어야 합니다. ->return() 내부를 묶을 때 의미없는 를 사용하기 싫으면 로 묶어주면 됩니다 (프레그먼트라고 부름) 문법 function Exapm(){ return( 제목 날짜 ) } 2020. 11. 11. [React]리액트 state 마음대로 변경하기 리액트에서는 useState를 활용하여 마음대로 값을 변경할 수 있다. 하지만, 유의할 점 몇 가지를 짚고 넘어가자. 리액트의 state OR props 값이 바뀌면 그 state값을 가지고 있는 Component의 render()함수가 다시 호출되고 render()밑엣것들도 다시 다 호출된다. 즉, 화면이 다시 리랜더링된다는 뜻. - 어떤 Component가 실행될 때 render라고하는 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 코드는 constructor라는 함수가 있다면 해당 코드가 제일 먼저 실행되면서 초기화를 담당한다. 초기화가 끝나면 this.state = { subject:{title:'WEB', sub:"World"} }로 초기화시킬 수 있다. class App extends Comp.. 2020. 11. 11. 이전 1 2 3 4 다음
