2024-03-29 75일차 React

📅2024. 03. 29 75일차

---

React

useEffect 의존성 배열을 활용해서, 실행민감도 조절

import React, { useState, useEffect } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
let AppCallCount = 0;
let SubCallCount = 0;

const Sub = ({appNo}) => {
	SubCallCount++;
	console.log(`Sub ${SubCallCount}번 실행됨`);

	const [no, setNo] = useState(0);
	const [no2, setNo2] = useState(0);
	
	useEffect(() => {
		console.log('effect 1 : 최초에 한번만 실행');
	},[]); // props : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용하는 속성
	
	useEffect(() => {
		console.log('effect 2 : 부모의 appNo가 바뀔때마다 실행');
	},[appNo]);
	
	useEffect(() => {
		console.log('effect 3 : 나(Sub)의 no가 바뀔때마다 실행');
	},[no]);
	
	useEffect(() => {
		console.log('effect 4 : appNo 혹은 no가 바뀔때마다 실행');
	},[appNo, no]);
	
	useEffect(() => {
		console.log('effect 5 : 매번 실행');
	});

	return (
		<>
			<button onClick={() => setNo(no + 1)}>Sub 버튼(no) : {no}</button>
			<button onClick={() => setNo2(no2 + 1)}>Sub 버튼(no2) : {no2}</button>
		</>
	);
};

const App = () => {
	AppCallCount++;
	console.log(`App ${AppCallCount}번 실행됨`);

	const [no, setNo] = useState(0);

	return (
		<>
			<div style={{ border: "5px solid red", padding: 10 }}>
				App no : {no}
				
				<Sub appNo={no}/>
				<hr />
				<button onClick={() => setNo(no + 1)}>App 버튼 : {no}</button>
			</div>
		</>
	);
};

• useEffect 실행 확인

입력값 소수 판별

//생략
// 소수 판별기(넘겨진 값이 소수인지 아닌지)
function isPrimeNumber(num) {
  if (num <= 1) return false;
  for (let i = 2; i < num; i++) {
    if (num % i == 0) {
      return false;
    }
  }
  return true;
}

• 소수 판별 함수 : 1이하 거짓 반복문으로 나머지 0 되는거 거짓으로 소수 찾기

// 1부터 n까지 수 중에서 소수만 배열담아서 리턴
function getPrimeNumbers(maxValue) {
  const primeNumbers = [];

  for (let i = 1; i <= maxValue; i++) {
    if (isPrimeNumber(i)) {
      primeNumbers.push(i);
    }
  }

  return primeNumbers;
}

• 1부터 n까지 수 중에서 소수만 배열에 담아서 리턴시켰다.

function getPrimeNumbersCount(maxValue) {
  return getPrimeNumbers(maxValue).length;
}

• 입력한 값의 소수 갯수 카운팅 함수

const App = () => {
	const [inputedNo,setInputedNo] = useState(0);
	const primeNumberCount = getPrimeNumbersCount(inputedNo);
	
	const onSubmit = (e) => {
		e.preventDefault();
		
		const form = e.target;
		
		form.number.value = form.number.value.trim();
		
		if(form.number.value.length == 0){
			alert('숫자 써');
			form.number.focus();
			return;
		}
		
		const number = form.number.valueAsNumber;
		form.number.focus();
		
		setInputedNo(number);
		
		// alert(`네가 입력한 숫자는 ${number} (이)다.`);
	}
	
	return (
		<>
			<form onSubmit={onSubmit}>
				<input type="number" name="number" placeholder="숫자 입력해" defaultValue="0"/>
                  
				<button type="submit">확인</button>
				<div>MAX : {inputedNo}</div>
				<hr/>
				<div>소수의 갯수 : {primeNumberCount}</div>
				<hr/>
			</form>
		</>
	);
};
//생략

• 인풋창에 숫자 입력 넘겨주고 UI에 입력한 숫자와, 소수의 갯수 나오게~~

소수 판별에 useEffect 사용 Var.

import React, { useState, useEffect } from "https://cdn.skypack.dev/react@18";

// inputedNo 값이 변경 되었을 때만 재랜더링 
	useEffect(() => {
		const primeNumberCount  = getPrimeNumbersCount(inputedNo);
		setPrimeNumberCount(primeNumberCount);
	},[inputedNo]);
	

• primeNumberCount는 계속 재 랜더링 될 필요가 없다. input값이 들어올 때만 재 랜더링 하면 된다.
• useEffect 써서 증가 버튼을 눌러도 primeNumberCount가 재 랜더링 되지 않는다. 특정 값(inputedNo)이 업데이트 될 때만 재랜더링

리액트(React), 1부터 입력값까지의 소수갯수를 알려주는 로직 구현에 useEffect 적용

---

소수 판별에 useMemo 사용 Var.

import React, { useState, useMemo } from "https://cdn.skypack.dev/react@18";

const primeNumberCount = useMemo(() => getPrimeNumbersCount(inputedNo), [inputedNo]);

• useMemo 사용하여 기억

리액트(React), 1부터 입력값까지의 소수갯수를 알려주는 로직 구현에 useMemo적용

---

useCallback 활용

import React, { useState, useCallback } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

let SubCallCount = 0;

function Sub({ no1, no2, calculateFunc }) {
	SubCallCount++;
	console.log(`Sub이 ${SubCallCount}번 실행`);

	return (
		<div style={{ border: "10px solid black", padding: 10 }}>
			입력 : {no1}, {no2}
			<br/>
			결과 : {calculateFunc(no1,no2)}
		</div>
	);
}

const MemoizedSub = React.memo(Sub);
// const calculateFunc = (a, b) => a + b;

let AppCallCount = 0;
const App = () => {
	AppCallCount++;
	console.log(`App이 ${AppCallCount}번 실행`);

	const [no1, setNo1] = useState(0);
	const [no2, setNo2] = useState(0);
	
	// const calculateFunc = useCallback((a,b) => a + b + no1,[]);
	// 위와 같은 경우엔 최초에 한번만 no1이 바뀌어도 반영 되지 않음, 이전 버전의 함수를 기억 중
	
	const calculateFunc = useCallback((a,b) => a + b + no1,[no1]);
	// no1의 값이 바뀌면 함수를 다시 만들어서 리턴
	
	return (
		<>
			<button onClick={() => setNo1(no1 + 1)}> 번호1 : {no1}</button>
			<hr />
			<button onClick={() => setNo2(no2 + 1)}> 번호2 : {no2}</button>
			<hr />
			<MemoizedSub no1={10} no2={20} calculateFunc={calculateFunc} />
		</>
	);
};

오늘의 개념

• props : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성

useMemo

• useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다.

useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.

리액트에서 함수형 컴포넌트는 렌더링 => 컴포넌트 함수 호출 => 모든 내부 변수 초기화의 순서를 거친다.

컴포넌트 최상단에서 useMemo를 호출

Memoization이란?

한 번 연산해본 결과를 기억해두고, 다시 동일한 입력이 들어오면 기억해둔 데이터를 반환하는 방법이다.

1+1 은 무엇인가?
(계산중...)
(계산완료) => 2
다시 한번더 1+1은 무엇인가?
(전이랑 동일하네? 기억해뒀던거 바로 반환) 2
위 방식처럼 엄청 복잡하거나 성능을 잡아먹는 함수라면 이러한 성능최적화가 필요하다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

이 코드는 생성(create) 함수인 computeExpensiveValue(a, b) 를 호출한다.
useMemo는 의존성인 [a, b]가 변경되었을 때에만 메모이제이션된 값만 다시 계산한다.
즉, [a, b]가 변경되지 않으면 이전결과를 바로 반환하므로 이러한 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해준다.

a와 b의 상태값이 변경되면 그것을 사용하는 모든 컴포넌트는 재렌더링 된다.
그 때 전부 렌더링이 되기에 계산도 다시하여 렌더링된다.
하지만 a와 b가 이전 값과 동일하다면 굳이 연산할 필요가 없다.
그래서 이 useMemo를 쓰는 것이다.

만약 useMemo의 두번째 인자인 의존성 값에 빈 배열이 들어간다면 매 렌더링때마다 계산을 하게 된다.
이럴 경우 useEffect와 동일하게 동작하지만 useEffect처럼 사용하면 안된다.
사이드 이펙트(side effects)는 useEffect에서 하는 일이지 useMemo에서 하는 일이 아니기 때문이다.

useCallback이란?

• UseCallback 메모이제이션된 콜백 함수, 즉 이미 생성된 함수를 반환하는 리액트 훅이다.

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.

• useCallback 사용방법

const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

useCallback 의존성 배열에 있는 상태나 props가 변경되지 않는다면, 해당 함수는 다시 생성되지 않는다.

첫번째 인자로 넘긴 함수를 두번째 인자로 넘긴 의존성 배열내의 값이 변경되기 전까지 저장하고 재사용할 수 있게 해준다.