kimjumpsun_code.log

[React] useCallback, 함수형 업데이트

Fri, 19 Aug 2022 06:28:26 GMT

💡 useCallback() 은?

리액트 Hook 중 하나로 렌데링 최적화를 위함 이다. useEffect 나 useMemo처럼 의존성 배열을 받는다.

사용방법

import React, { useCallback } from "react";

useCallback(() => 
{ callback 함수 }, [] );

두번 째 인자인 deps(의존성 배열, dependency array) 에 변화가 일어나면 메모이제이션(memoization) 된 콜백함수가 반환된다.

useMemo() 와 memoization 된 것을 반환한다는 점은 동일하지만,

🕹 useMemo() 는 함수의 '값'을 반환하고

(=> 이전의 결과값을 재사용 하는데 용이)

🕹 useCallback() 은 함수를 반환한다.

(=> 함수가 재생성되어 렌더링 되는 것을 방지하기 위해 사용)

그런데 두 가지 문제가 발생!

[] 값을 비워두면, 데이터를 날려버리고 새로운 데이터만 저장하게 되거나

const onCreate = useCallback(
(author, content) => {
const newItem = {
author, 
content,
id: dataId.current,
};
dataId.current += 1;
setData([newItem, ...data});
}, []); // 기존의 데이터가 날아가고 새로운 데이터만 저장

**[data] 로 두면, 최신 데이터 값을 참고할 수 없기 때문에 새로고침을 할 때마다 렌더가 된다. **

const onCreate = useCallback(
(author, content) => {
const newItem = {
author, 
content,
id: dataId.current,
};
dataId.current += 1;
setData([newItem, ...data});
}, [data]); // 새로고침을 할 때마다 리-렌더

데이터의 값이 최신으로 변경되고 변경되었을 때만 렌더링 되도록 구현하고 싶다면, 이럴 때 사용하는 것이 바로 함수형 업데이트 이다.

💡 함수형 업데이트의 사용

setState에 값 대신 함수를 전달하는 것을 함수형 업데이트라고 한다.

setState의 최신 정보를 인자를 통해 확인이 가능하므로 deps를 비워두게 되더라도([ ])
setState를 동기적으로 사용 할 수 있다.

const onCreate = useCallback(
(author, content) => {
const newItem = {
author, 
content,
id: dataId.current,
};
dataId.current += 1;
setData((data) => [newItem, ...data});
}, []); // setState (여기서 setData) 를 동기적으로 사용가

=> 데이터의 값이 최신으로 변경 될 때만 렌더링이 일어남

==> 📌 최적화 성공!

[Book]프로그래머의 뇌_인지과학의 모든 것

Thu, 02 Jun 2022 00:31:02 GMT

프로그래머의 뇌는 네덜란드 레이던 대학교의 부교수인 펠리너 헤르만스가 집필한 책으로 그는 프로그래밍 교육과 프로그래밍 언어에 대해 연구한다.

이 책은 프로그래머가 프로그래밍을 할 때 일어나는 뇌의 인지활동을 이해해 보다 효율적인 코딩생활(?)을 할 수 있도록 돕는다.

책은 크게 아래의 네 파트로 분류된다.

1. 코드 더 잘 읽기 2. 코드에 대해 생각하기 3. 좋은 코드 작성하기 4. 협업하기

향후 내가 어떠한 그룹에 속하게 된다면, 다른 이들의 코드를 많이 보게 될 텐데 그 때 좀 더 수월하기 위함이고 스스로의 코드가 타인에게 잘 읽히길 연습하는 좋은 과정이 될 것 같아 정리를 남긴다.

Chapter 1. 코딩 중 겪는 혼란에 대해

1-1. 혼란의 유형 세 가지

1. 지식의 부족 (knowledge)으로 처음 보는 언어를 접했을 때가 되겠다.

→ 지식이 없다는 것은 뇌의 장기기억 공간(long-term memory, LTM)에 해당 내용의 지식의 부재를 의미

2. 정보의 부족 (information) 상태로 언어는 알지만 메소드의 동작 원리를 알지 못할 때가 되겠다.

→ 정보가 부족하단 것은 단기기억 공간(short-term memory, STM)에 해당 내용의 부재를 의미

3. 처리 능력의 부족(processing power) 상태는 코드가 복잡하여 코드를 따라가다 길을 잃어버리는 상태가 되겠다.

→ 많은 정보를 처리할 때 작업 기억 공간(working memory)가 영향을 받음을 의미 (잊어버린다)

Github에 API Key 숨기기

Thu, 26 May 2022 06:47:24 GMT

이번 5월 노마드 챌린지를 하기 이전에 나는 이미 api key를 그대로 push 했었다. 그나마 다행인건 private으로 올렸다는 것인데.. 이번 기회에 환경변수를 사용하지 않는 간단한 방법을 알게되어 기록한다.

개인 레포이길 망정이지 😖 프로젝트 하며 github에 push할 때에는 API Key 를 조심 또 조심하자!

노마드 챌린지 중 사용자의 위치를 받아와서 날씨 정보를 뿌려주는 작업이 있었고
github에 api code가 그대로 노출되어 위험성 감지했다.
숨기려는 code는 한 줄로 매우 간단하기 때문에 .env node.js 를 사용하지 않고 API key를 숨기고 싶다.

API key 숨기는 방법(초간단)

1) `apikey.js` file 만들고 key를 넣는다.

const config = {
    apikey: "APIkey 입력"
}