주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn useMemo와 useCallback Class에서 작업했던 것들을 Hooks로 옮기다보면 Class에서 문제가 되지 않던 부분들이 문제가 되는 경우가 있다. Hooks는 함수안에 있는 내용이 재 렌더링이 되는데, getNumbers라는 함수가 Hooks의 특성으로 인해서 재 렌더링이될 수 있다. import React, { useState, useRef, useEffect } from 'react'; function getNumbers(){ // ...... } const Test = () => { const numbers =() =..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn // 고차함수 this.onClick = (arg) => (e) => { //... } render(){ return( ); } (arg) => 뒤에 arrow function을 추가해서 감싸줄 수 있다. 여러번 setState를 호출해도 한번만 렌더링한다. 이것은 react가 알아서 처리한다. setState({}) setState({}) setState({}) setState({}) setState({}) class 컴포넌트에서 라이프사이클을 쓸 수 있는데 함수컴포넌트에서는 어떻게쓰는가? componentDidMount, compo..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn React에서 재 렌더링이 발생할때 성능을 생각하면 state나 props가 변경되는 것을 파악해서 재 렌더링이 필요없는 컴포넌트의 재 렌더링을 막아야한다. 즉 a 컴포넌트만 달라져야하는 부분이 있을 경우, 기능을 나눌 수 있다면 a와 b로 컴포넌트를 분리해야한다. 성능 최적화를 하기위해서 shouldComponent, pureComponent, useMemo, useCallback을 사용하는것이 좋다. 이것을 알기 위해서는 useEffect를 알아야한다. (이건 더 뒤에 강의에서) class 컴포넌트와 함수형 컴포넌트의 차이. cla..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 드디어 4에 들어왔다(한참 남았지만^^;) render 의 return 안에서는 for문과 if를 사용하면 안좋다.(못쓰는 건 아니지만 지저분해지기 때문에 안티패터이될수있다) if문을 보통 삼항연산자로 쓰거나 논리연산자로 사용한다. jsx에서는 아무것도 없다가 null이다. render(){ return( { this.satate.result.length === 0 ? null : 조건 } { this.state.result.lengt !== 0 && 조건 } ); 리액트에서는 jsx의 가독성이 중요하기 때문에 함수로 뺄 수 있다. r..