react4
React
Hook
useEffect
Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다.
구조
- 렌더링 될때 마다 실행되는 구조
useEffect (() => {
수행코드
})
- 특정값이 변할때만 실행
useEffect (() => {
수행코드
},[변수])useEffect (() => {
수행코드
},[변수, 변수])공통된 로직을 사용한다면 DependencyArray에 요소 같이 적어주기~!
- 마운팅 이후, 딱 1번만 실행
빈 배열값 (DependencyArray를 파라미터로 전달
useEffect (() => {
수행코드
},[])- 언마운팅시 등록된 기능을 해제할때 실행
useEffect (() => {
수행코드
return () => {
종료하고자 하는 수행코드
}
},[])
DependencyList(Array)
- 언마운팅시 등록된 기능을 해제하는 예제
App.js
<div>
{showWork && <UseEffect2 />}
<button onClick= {() => {setShowWork(!showWork)}}>Click</button>
</div>UseEffect.js
import React, { useState, useEffect } from "react";
const UseEffect2 = () => {
useEffect (() => {
const intervalWork = setInterval(() => {
console.log('interval work : 작업중')
}, 1000);
// 컴포넌트가 unmounting 될때 실행
return () => {
clearInterval(intervalWork)
}
}, []);
return (
<div>
<span>작업중 - 콘솔확인</span>
</div>
);
}
export default UseEffect2useRef
reference의 약어
특정 컴포넌트에 접근할 수 있는 객체
구조
const ref = useRef(초기값);
출력값 : {current: 초기값}
기능
컴포넌트가 언마운팅될때까지 컴포넌트의 정보를 유지
실제사용
1) 데이터 저장 공간
2) DOM 요소에 접근
⭐ 리액트에서는 객체 자체를 출력하고자 할때, 에러 발생⭐
<p>RefNumber : {refNumber}</p>ref객체의 current이용하여 출력
<p>RefNumber : {refNumber.current}</p>ref객체의 업데이트된 값이 화면에 출력되지 않는 이유
내부적으로는 refNumber.current가 +1 기능 수행이 되고 있음
그러나, 업데이트된 값이 화면에 출력은 되지 않음
그 이유는, ref 수행 결과로 렌더링은 일어나지 않기 때문
렌더링이 일어난다는 것은 프로그램 자체에 부담을 줄 수 있음
따라서 ⭐ ref는 렌더링이 자주 일어나지 않아야하는 경우에 사용가능
일반변수는 리렌더링이 일어나면 초기화(기본값)된다
초기값 유지 -> ref(저장공간)
DOM접근
function UseRef2 () {
const inputRef = useRef()
useEffect (() => {
console.log(inputRef)
}, [])
return (
<div>
<input ref={inputRef} type="text" placeholder="username" />
<button>login</button>
</div>
);
}
useMemo
메모이제이션 Memoization
동일값을 반환하는 함수를 반복적으로 호출하는 경우 해당 결과를 메모리(캐시)에 저장하여 사용하는 기능
함수형 컴포넌트가 렌더링되면서 내부에 함수를 계속해서 호출하는 경우가 발생할 수 있음
이를 효율적으로 관리하고자할때 useMemo를 사용할 수 있음
구조
const result = useMemo(() => {
연산 코드;
return 결과;
})
useCallback
구조
const result = useCallback(() => {
연산 코드;
return function();
})
useMemo / useCallback
주의해서 사용해야함 : 메모리를 계속해서 사용하기 때문에 불필요한 값이나 함수가 메모리를 차지하지 않도록 지정해야함
훅의 규칙
- 함수형 컴포넌트에서만 사용 가능
- 최상위 레벨에서만(조건/반복X) 사용 가능
function View (props) {
console.log(props.children)
return (
<div>
</div>
);
}=
function View ({children}) {
console.log(children)
return (
<div>
</div>
);
}같다~!
조건부 렌더링
조건에 따른 렌더링
제어컴포넌트/ 비제어 컴포넌트
Controll --> 제어 컴포넌트 vs 비제어 컴포넌트
제어 컴포넌트
사용자가 입력한 값에 접근하고 제어할 수 있도록 지정한 컴포넌트
ex) HTML, input, select, textare, ...
HTML 자체에서 state 관리가 됨 (내부에 state를 갖고 있음) --> JS로 접근이 쉽지 않다.
--> 해결법?
</input
: 비제어 컴포넌트를 제어 컴포넌트로 만드는 법
비제어 컴포넌트
⭐
-
propDrilling 내리꽂기
상위 컴포넌트에서 하위 컴포넌트로 props를 전달해주는 방법 -
sharedState : state공유하기
상위 컴포넌트에 있는 state를 하위 컴포넌트로 전달하여 데이터를 공유하는 방법 -
state 끌어올리기
하위 컴포넌트에 있는 state를 상위 컴포넌트로 전달하여 데이터를 공유하는 방법
⭐⭐⭐⭐
