0hyeon

리액트에서는 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 위경우 , 렌더링이 되는데 이러한 과정을 줄이는것을 최적화 라고 한다. 그리고 최적화를 도와주는 리액트 훅이 있는데, React.memo, useCallback, useMemo 에 대해 정리해보고자 한다. 이녀석들은 다음과같은 기능을 가지고 있다. memo(React.memo) : 컴포넌트 재사용 useCallback : 함수 재사용 useMemo : 값 재사용 1.memo(React.memo) => 컴포넌트 캐싱 컴포넌트를 여러트리로 설계함에 있어 리렌더링이 발생한다. 1번 컴포넌트가 리렌더링 된 경우, 2~7번이 모두 리렌더링 된다. 4번 컴포넌트가..

const refTarget = useRef(init); useRef를 사용하는이유 값 저장 : 현재 저장하고 싶은 값을 re-rendering없이 저장 DOM 참조 : DOM을 참조할 수 있다. element의 scroll위치, image의 size 등을 참조 => useState로 관리하게 되면, rendering이 계속 발생하므로 비효율적이고, 코드짜기가 어렵다. 얼핏 보면 useState와 비슷하다. state와 ref의 차이점 state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다. ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다. DOM참조 스크롤관련 scrollTop, scrollLeft,scrollTo,scrollBy,scrollIntoView 이미지 사이즈 참조 funct..

1. useState 일반사용법 import { useState } from "react"; const App = () => { const [number, setNumber] = useState(0); return ( {/* 버튼을 누르면 1씩 플러스된다. */} {number} { setNumber(number + 1); // 첫번째 줄 setNumber(number + 1); // 두번쨰 줄 setNumber(number + 1); // 세번째 줄 }} > 버튼 ); } export default App; 일반 사용법은 onClick 이벤트 클릭시 클릭시 1씩 증가함. 2. useState 함수형 업데이트 방식 import { useState } from "react"; const App = () =..

콜백함수 콜백함수는 다른코드의 인자로 넘겨주는 함수 입니다. 예제로서는 자바스크립트 내부메서드 setInterval이 있습니다. let intervalID = scope.setInterval(func, delay[ param1,param2, ... ]); setInterval은 매 delay 마다, 반복적으로 실행하는 메서드로서, 변수에 담은이유는 반복 실행되는 중간에 종료 ( ClearInterval ) 를 하기위해서입니다. let count = 0; let cbFunc = funtion() { console.log(count); if( ++count > 4 ) clearInterval(timer); }; let timer = setInterval(cbFunc, 1000); 이처럼 콜백 함수의 제어권을..

문제점 api 기능 만들던중, 함수를 재사용하려 따로 만들어 두어 Export해서 불러왔더니... 위와 같은 빨간줄이 생겼다. (당연히 import도 해왔다) 대체 왜이럼.... 시도해본것들 첫번째 인자의 타입에도 빨간줄이 그어져서 해당함수 관련 타입들을 샅샅이 뒤졌지만 이상무. 두번째 함수의 import를 잘못해왔나 해서 둘러봤지만 이상무.. 필수역량 구글링 시작 해결 해결법은 간단하였고 스코프의 개념을 알고있으면 단번에 해결이 가능한내용이었다. try객체 안에서의 함수를 사용하려면 블럭스코프 내에 함수와 전역 함수만 이용이 가능했던것. 이것의 대한 해결은 함수를 변수에 담아 스프레드 연산자로 풀어줬다. (성공) 알게된점 단순히 export / import 해와서 함수가 잘못되었나. 변수가 잘못되었나...

불변성 데이터를 수정할때에, 원시데이터는 불변성이 있기때문에 새로운메모리 저장공간 새로 만들고 그것을 바라보게 하는 방법으로 수정하고 , 참조형데이터는 불변성이 없어 메모리에 저장되어 있는공간에서 값을 바꿔버리는데, 불변성이 없는것들 때문이다 즉,리액트에서 화면이 바뀌어야 할때 컴포넌트가 수정이 되는데 이는 스테이트 바뀌어야 화면이 바뀐다. 이과정에서 리액트가 스테이트가 바뀌는지 안바뀌는지 알려면, 메모리 주솟값이 바뀔때 인식을 하기때문에 불변성을 유지하는것이 중요하다. function App () { const [obj, setObj] = useState({name : "0yheon", age : 21 }); return( {obj.name} { obj.name = "1yheon"; console.lo..

1.상수와변수 const : 재할당 안됨. 내부속성값은 수정 가능. let : 재할당 가능! var: 쓰지마세요... *둘다 block level scope를 가집니다. 2.객체를 선언하는 방법 const name = 0hyeon; const age = 21; const obj = { name, age, dosomething: ()=>{} } (생략가능) 3.얕은복사 (복사주의) const obj1 = { value1 = 10; } obj2 = obj1 obj2.value1 += 1; console.log(obj1.value1)//11 console.log(obj2.value1)//11 obj2를 바꿨는데 obj1도 바뀌어버리는 문제가 얕은복사의 문제점 ( 바라보는 주솟값을 복사했기때문) 해결법: obj..

JavaScript의 ES란? ECMA(European Computer Manufactures Association) + script 라고보면될것같다. Script라는 키워드가 붙지만, 자바스크립트는 언어이고, ECMA 스크립트는 규격, 표준을 뜻한다. ES5/ES6 문법 차이 왜 ES5 와 ES6의 차이냐고 물어본다면 현재 우리가 사용하고 있는 대다수의 forEach, map, filter, reduce, some, every와 같은 주옥같은 메소드 들이 ES5부터 등장했기 때문이고, ES5와 ES6 사이에 개념들이 현재에 이르기까지 개발자들이 유용하게 쓰는 메소드들이 많기 때문에 아마 ECMA 버전에서 큰 영향력을 끼치는 문법이기 때문에 ES5,6의 문법의 차이가 회자되는것같다. 이때문에 취업시장에서..

문제점 프로그래머슬 lv1.을 풀던 와중 같은 숫자는 싫어라는 녀석을만났다. 내 배열에 있는 값들중 현재값과 다음값의 값이 다른값들만 필터링 해주는 함수를 만들어야 하는데 이과정에서 필터함수를 알게되며 포스팅을 작성하도록한다. 시도해본것들 이중포문으로 let arr = [] for{ for{ arr.push(필터링된 값들 ) } } 해결하려 했으나 시간복잡도가 너무나도 비효율 적이어서 다른 방법을 모색하기로 하였다. 해결방법 자바스크립트 filter함수를 통해 조건이 만족되는 값들만 뽑아내는 멋진녀석으로 해결하기로함. 알게된것들 function solution(arr){ return arr.filter((a,index)=> a !== arr[index+1]) } 필터함수를 통해 현재값과 다음값이 같지않은..

프로그래머스 문제를 풀다가 배열을 순회함에 있어, 어떤것은 forEach, 어떤것은 map을 사용하는것을 발견하여 서치를 시작하였다. 결론부터 말하면 둘다 배열안에 요소를 순회하는 공통점이 있었으나 쓰임이 달랐다. map은 순회하는 각 요소들이 업데이트 되어 새로운 배열로 리턴할때 유용 forEach는 배열안에 특정 요소만이 특정 작업을 수행하는경우 유용 했다. (원본 배열은 건드리지 않음) 즉, 결과 배열이 필요한지(map), 아니면 각 요소에 대한 작업 결과만이 필요한지에 따라(forEach) map이나 forEach를 사용하는 것이 적합한지 결정하는 차이가 있을 수 있겠다. Tip. forEach의경우 다음처럼 체이닝 메서드를 이용하면 용이 sailors .filter(sailor => sailor..