ANX1-Z3R0의 불안극복(不安克服)

useState를 대체 가능한 상태관리 Hooks이다. 분명 useState도 아주 유용한 Hook이지만, 코드가 길어졌을 때 처음 선언해두고, 코드의 망망대해에 빠질 수 있다. 하지만, 간단한 컴포넌트에선 오히려 코드의 길이를 길게 만들 수 있으므로, 큰 프로젝트에서 컴포넌트 간에도 값을 전달시키고 가독성 좋게 상태관리를 하고 싶을 때 사용하면 되겠다. 포맷은 다음과같다. const [state, dispatch] = useReducer(reducer,Initial state); // 상태 , 상태업데이트 값처리함수, 초기 state값 useState와 꽤나 닮아있다. 값처리 함수를 추가할뿐이다. (reducer자리) 심지어 각 자리의 역할도 같다. const [X,useX] = useState('')..

이 또한 memoization의 일환으로, 컴포넌트에 전달되는 동일한 props가 전달됐을 때, 저장된 컴포넌트를 불러오도록 하는 고차 컴포넌트이다. 따라서 props가 거의 항상 변경되는 컴포넌트에는 갱신값 비교에서 계속 false가 될 것이므로, 오히려 비효율적이다.(props값 비교에 더 많은 자원을 사용하게 된다.) 사용법은 간단하다. 그냥 함수를 감싸주면 된다. const hi = "name"; const hello = () => { console.log(`hi, ${hi}`); }; 위와 같은 함수를 const hi = "name"; const hello = React.memo(() => { console.log(`hi, ${hi}`); }) 하면 되고, 이게 컴포넌트 단위일때는 export ..

함수 최적화이다. 함수를 리렌더 될때마다 생성하지 않도록 하는 것인데, 기존 문법들과 같다. (Hooks에 익숙해지고 있다는 거겠지) 포맷 useCallback(()=>{ 동작 },[{/*deps*/}]) 이걸 함수안에다 넣어서 onclick에 넣어줘도되고, deps를 비워서 첫 실행때만 작동하게 할 수도 있다. 기존의 on~에 넣었던 함수를 useCallback으로 감싸주기만 하면 된다. 예제랄께 없넹 const onToggle = id => { setUsers( users.map(user => user.id === id ? { ...user, active: !user.active } : user ) ); }; const onToggle = useCallback(id => { setUsers( user..

포맷 useMemo({/*함수*/},[{/*deps*/}]) useMemo는 js의 memoization을 편하게 쓰도록 하는 Hooks이다. Memoization 동일한 계산을 반복하지 않게 메모리에 값을 저장하여 성능을 최적화하는 알고리즘 메모이제이션 예제로 가장 유명한 것이 재귀호출 방식으로 작성된 피보나치 수열의 최적화이다. 다음 두 코드를 보자. classicFibonacci.js var count1 = 0; var fibonacci = function (n) { count1++; return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); }; var start = new Date(); for (var i = 0; i

우리는 보통 함수의 흐름이 return시엔 모든 게 끝나는 걸로 알고 있다.(사실은 그렇진 않고 실행이 끝난 후 GC가 메모리를 수거해가는 형태) 많은 언어들이 지역변수는 함수가 처리되는 동안에만 사용가능하도록 설계되어있다. function counter() { var count = 0; return function() { count++; console.log("Counter is ", count); } } var cnt = counter(); cnt(); cnt(); 하지만 이 코드는 수거됐을 법한 count의 값을 정상적으로 처리해서 출력해준다. (화려한 부활?) 그건 아니고 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 따라서 안에서 활성화된 변수를 자유 변수라고 하고, 함수와 함께 기억..

즉시실행함수이다. (function(a,b){console.log(a+b)})(1,2); 이렇게 생겼는데, 겁먹지 않아도 되는게 const fonction = function(a,b){ console.log(a+b) } fonction(1,2) //3 위의 표현을 줄인 것이라고 생각하면 쉽다. 보통 재사용할 일이 없는 동작을 코드를 더럽히지 않고 실행할때 요긴하게 사용된다. 그리고 IIFE 패턴으로 작성된 함수는 외부에서 접근할 수가 없다. (function init() { console.log("hi"); })(); //hi init(); // ReferenceError: init is not defined 위 코드는 hi가 한번 출력되고 오류가 발생하게 된다. 따라서 웹같은걸 짰을 때, debuggi..