전체 글

참고 사이트 • 리액트 공식 문서 - useMemo 📝 useMemo useMemo는 재렌더링 간 계산 결과를 *캐시(Cache)할 수 있는 React Hook이다. 비용이 많이 드는 재계산을 건너뛰기 위하여 사용한다. *캐시(Cache): 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소로 데이터 접근하는 시간이 오래걸리거나 다시 계산하는 시간을 절약하고 싶은 경우에 사용 출처: Wikipedia 반환값을 캐싱하는 것을 메모이제이션(memoization)이라고도 하며, 이것이 이 Hook이 불리는 이유이다. 📢 참조 useMemo 재렌더링 간의 계산을 캐시하려면 구성 요소의 최상위 수준에서 호출한다. const cachedValue = useMemo(calculateValue, [depende..

참고사이트 • React 공식 문서 - useRef 🪣 useRef 렌더링이 필요하지 않은 값을 참조할 수 있는 React Hook이다. useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. 📦 Parameter • initialValue: 초기에 저장되는 값을 넣으며, 모든 유형의 값이(lite, DOM...)이 될 수 있다. 이 인수는 초기 렌더링 후에 무시된다. 🎁 Return useRef는 단일 속성을 가진 객체를 반환한다. {current: value} • current: initialValue값이 들어가 있으며 null을 사용해도 된다. 향후 다른 것으로 설정할 수 ..

참고 사이트 • gofo-coding님의 티스토리 🗿 OpenGL Open Graphics Library로, Graphics 프로그래밍을 위한 API입니다. (Library 이름과 달리 API이다.) 더보기 📄 Library • Collection of functions, pre-compiled routines or reusable components of code → 코드를 모아놓은 것 • 코드의 반복을 줄이고 재사용 할 수 있게 한다. • 프로그래밍 속도를 단축할 수 있다. 📄 API • Collection of software protocols → 인터페이스를 모아놓은 곳 • 라이브러리로 만들어져있을 수 있다. • 다른 기능을 수행하기 위해 다른 Utility Library가 필요 OS는 OpenG..

참고 사이트 • 소년코딩님의 티스토리 🫵🏻 포인터 변수는 데이터를 저장하는 공간이라고 앞서 게시글에서 설명하였다. 이때, 담기는 공간은 컴퓨터의 메모리이며, 해당 변수는 메모리에서 어디에 위치해있는지 주소값을 가진다. 데이터를 저장하는 변수가 아닌 메모리의 시작 주소값을 저장하는 변수를 포인터라고 한다. ⭐ 포인터 선언 포인터 변수는 일반 변수처럼 선언되며, 자료형과 변수 이름 또는 그 사이에 ( * )이 붙는다. #include using namespace std; int main() { int v = 10; //방법1 int* p_x = &v; //방법2 int * p_y = &v; //방법3 int *p_z = &v; // 여러 포인트 선언 시, int *p1, *p2, *p3, p4 //이때, p..

참고 사이트 • banaba님의 티스토리 • min-zero님의 티스토리 🪣 변수 변수는 데이터를 담을 공간을 의미한다. 즉 , 데이터를 저장하는 공간이 변수이다. 변수를 사용하기 위해서 선언(declaration)과 정의(definition)을 해야한다. 용어 설명 선언 (declaration) *컴파일러가 참조할 *식별자(identifier)와 이름을 알려주는 것. 선언은 메모리 영역 상에 올리지 않아 중복되어도 문제가 되지 않으며 두 번 이상 할 수 있다. 정의 (definition) 식별자와 이름을 통해 필요한 코드를 생성하는 것이다. 호출되었을 때, 실행될 코드들이 작성되므로 해당 기능 실행을 위해 메모리가 할당되며, 선언한 이름의 함수, 변수, 클래스등이 어떠한 동작을 할 것인지 알려주는 것...

🎆 useEffect useEffect()는 페이지의 마운트, 언마운트, 업데이트 시 작업을 설정한다. 용어 설명 Mount 컴포넌트가 페이지에 나타남 unMount 컴포넌트가 페이지에서 사라짐 업데이트는 useEffect() 특정값에 의존하여 해당 값이 변경, 실행되면 해당 useEffect()를 재실행한다. useEffect()의 구조는 다음과 같다. useEffect(()=> { // 마운트 완료 후 실행할 코드 return () => { // 언마운트 완료 후 실행할 코드 } }, [dependencies]) 💻 Code 리액트 프로젝트를 생성하고 다음과 같이 작성한다. 📄 EffectComponent.tsx import React, { useEffect, useState } from 'react..

👨🏻‍🍼 useState 특정 값을 useState()로 선언하여서 값의 상태를 관리하고, 해당 값의 상태가 변경되면 화면을 리렌더링하여 클라이언트에게 보여준다. 이때, 리렌더링이 일어나는 컴포넌트에 자식 컴포넌트가 있다면, 자식 컴포넌트 또한 다시 불러와지면서 자식 컴포넌트까지 리렌더링 됩니다. 💻 Code 리액트 프로젝트를 만들고, 다음 파일을 만들어준다. 📄 StateComponent.tsx import React, { useState } from 'react' export function StateComponent(): JSX.Element { const [num, setNum] = useState(0) const onIncrease = () => setNum(num + 1) const onDec..

작성자 개발 환경 ✅ VScode ✅ Mac or Windows 🛠️ 리액트 프로젝트 생성 (CRA) CRA는 Create-React-App의 약자로 리액트 프로젝트를 생성하는 것을 말한다. 리액트 프로젝트를 생성하기 위해 명령 프롬프트(CMD) 혹은 >_ Terminal 을 열어준다. 그 다음 다음 명령어를 실행한다. $ npx create-react-app 에 .을 넣으면 현재 경로에 리액트 프로젝트가 생성되고, 에 문자를 작성하면 해당 문자를 폴더명으로 하는 폴더를 생성하여 그 안에 프로젝트를 생성한다. 는 해당 프로젝트의 옵션을 부가한다. --template typescript를 작성하면 타입스크립트의 프로젝트가 생성된다. 아무것도 작성하지 않을 시 default로 JavaScript 프로젝트를 ..