0. React에 후크가 있는 이유는 무엇입니까? (공유 텍스트)
리액트는 라이브러리입니다.
즉, 이전에 HTML, CSS 및 Javascript로만 구성된 프로젝트에서 JSX를 해석하기 위해 Babel이 있는 경우 부분적으로 롤인할 수 있습니다.
처음에 React는 많은 클래스 구성 요소를 사용했습니다.
여러 가지 이유가 있었지만 기능적 구성 요소가 내부적으로 상태를 가질 수 없었기 때문입니다.
Q. 기능 구성 요소가 상태를 저장할 수 없는 이유는 무엇입니까?
A. 무언가를 “저장”한다고 가정해 봅시다.
변수를 선언하지 않고 저장하는 방법이 있습니까?
존재하지 않는다.
클래스는 그 자체가 개체이기 때문에 변수에 데이터를 포함할 수 있습니다.
그러나 기능은 어떻습니까? 함수는 실행 가능한 명령문입니다.
한 번만 실행하면 완료됩니다.
무언가를 저장할 수 없습니다.
이러한 단점을 보완하기 위해 페이스북은 2019년 React 16.8에 hooks를 도입했습니다.
후크는 기능 구성 요소의 상태를 유지하는 방법을 제공했으며 구성 요소 수명 주기의 각 단계에서 다른 기능을 수행하는 방법도 제공했습니다.
React에서 제공하는 Hook은 기본적으로 3가지 타입(useState, useEffect, useContext)이며 추가 Hook은 10개, 라이브러리 형태로 2개가 더 있습니다.
1. 사용효과 설명
useEffect는 두 가지 일을 합니다.
1. 이 문은 모든 구성 요소가 렌더링된 후에 실행됩니다.
(이것은 매우 중요합니다.
모든 레이아웃 배치 및 렌더링이 완료된 후에 이 작업을 수행하십시오.)
2. 1을 만족하는 동안 특정 값이 변할 때 실행할 수 있습니다.
두 가지 기능이 있기 때문에 헷갈릴 수 있습니다.
예제 코드를 통해 알아봅시다.
2. 초기 코드 및 첫 번째 기능
이 글에서 말씀드릴 내용은 useEffect입니다.
초기 코드는 다음과 같습니다.
import React, { useState } from "react";
import "./App.css";
function App() {
const (count, setCount) = useState(1);
const handlerCountUpdate = () => {
setCount(count + 1);
};
return (
<>
<button onClick={handlerCountUpdate}>Update</button>
<span> count: {count} </span>
</>
);
}
export default App; Vite로 빌드를 하고 있기 때문에 실행시 화면이 약간 다를 수 있습니다.
이것은 일반적인 카운트 업 예입니다.
이제 이 코드를 보자마자 지쳤을 텐데, 그래서 React를 해봤습니다.
카운터 외에도 입력에 값이 입력될 때마다 화면을 그릴 수 있도록 onChange에 함수를 추가해 보겠습니다.
그리고 입력 태그의 값이 변경될 때마다 설정됩니다.
import React, { useEffect, useState } from "react";
import "./App.css";
function App() {
const (count, setCount) = useState(1);
const (name, setName) = useState("");
const handlerCountUpdate = () => {
setCount(count + 1);
};
useEffect(() => {
console.log("렌더링 완료");
});
const handleInputChange = (e) => {
setName(e.target.value);
};
return (
<>
<div>
<button onClick={handlerCountUpdate}>Update</button>
<span> count: {count} </span>
</div>
<div>
<input type="text" value={name} onChange={handleInputChange} />
<span>name: {name}</span>
</div>
</>
);
}
export default App;
그렇다면 언제 화면이 업데이트됩니까?
1. 버튼을 누를 때마다 숫자를 늘려야 하므로 화면이 다시 그려집니다.
2. 입력 태그에 텍스트를 입력할 때마다 옆에 텍스트를 추가해야 하므로 화면이 다시 그려집니다.
이 경우 이 두 가지가 발생할 때마다 화면이 그려집니다.
화면을 그리면서 콘솔을 보면 useEffect에 쓰여진 함수가 실행되고 있는 것을 알 수 있습니다.
요약하면,
명령
1. 반응 성분의 탄생
-> 2. 컴포넌트에 존재하는 모든 메모리 값과 함수 실행
-> 3. 마지막에 useEffect에 있는 함수 실행
이런 일이 일어날 것입니다.
3. useEffect의 두 번째 기능
useEffect에는 두 가지 기능이 있다고 이미 말했습니다.
두 번째는 “특정 값이 변경될 때 트리거됨”입니다.
바로 전의 첫 번째 기능에는 한 가지 큰 단점이 있습니다.
외부에서 3,000개의 데이터를 useEffect로 가져오는 코드를 작성했다고 가정합니다.
카운터 버튼을 클릭하거나 입력 태그를 작성할 때마다 3,000개의 새로운 데이터를 가져옵니다.
이는 매우 비효율적일 뿐만 아니라 전체 구성 요소의 속도를 저하시킵니다.
이 경우 useEffect는 특정 값이 변경된 경우에만 실행할 수 있습니다.
샘플 코드로 알아봅시다.
import React, { useEffect, useState } from "react";
import "./App.css";
function App() {
const (count, setCount) = useState(1);
const (name, setName) = useState("");
const handlerCountUpdate = () => {
setCount(count + 1);
};
useEffect(() => {
console.log("렌더링 완료 버전2");
}, (count)); // <--- 여기가 바뀜
const handleInputChange = (e) => {
setName(e.target.value);
};
return (
<>
<div>
<button onClick={handlerCountUpdate}>Update</button>
<span> count: {count} </span>
</div>
<div>
<input type="text" value={name} onChange={handleInputChange} />
<span>name: {name}</span>
</div>
</>
);
}
export default App;기존 useEffect 구문에 두 번째 매개변수로 배열을 추가했습니다.
이 경우 useEffect는 첫 번째 샘플 코드와 완전히 다르게 작동합니다.
구성 요소가 처음 그려지면 한 번 실행됩니다.
(먼저 3,000개의 데이터를 가져와야 합니다.
.)
그 후에는 해당 배열의 값이 변경될 때만 실행됩니다.
이 경우 count라는 변수를 추적하고 있습니다.
이로 인해 useEffect는 더 이상 입력 태그에 텍스트를 삽입하여 실행되지 않습니다.
4. 요약
모든 기능을 살펴보았습니다.
모든 구성 요소를 그린 후 실행할 명령을 입력합니다.
그리고 두 번째 매개변수에서 배열의 값을 추적합니다.
따라서 useEffect의 기본 형식은 다음과 같습니다.
useEffect(설정, 종속성?)
? null 여부가 명확하지 않음을 의미합니다.
참조:
1. 원본 효과 후크 텍스트
https://reactjs.org/docs/hooks-effect.html
효과 후크 사용 – 반응
사용자 인터페이스 구축을 위한 JavaScript 라이브러리
Reactjs.org
2. 최근 베타 기여
https://beta.reactjs.org/reference/react/useEffect
useEffect
사용자 인터페이스 구축을 위한 JavaScript 라이브러리
beta.reactjs.org