참고
Hook의 개요
NOTE
React Hook은 함수형 컴포넌트에서 상태 관리 및 생명 주기 기능을 사용할 수 있게 해준다!
함수형 컴포넌트 생명주기
기존 함수형 컴포넌트들은 reRender()되면, 새롭게 선언하고 초기화 되었기에 state 관리가 불가능했다. 하지만 Hook의 등장으로 브라우저에 메모리를 할당해서 함수형 컴포넌트가 state를 가질 수 있게되었다!
•
함수형 컴포넌트 최상위에서만 사용하며, 앞에 Use를 붙여야한다.
•
한 컴포넌트에 여러개의 Hook이 있는경우 위 → 아래 순으로 적용된다.
React Hook 1
useState
NOTE
useState는 사용자의 입력과 같은 상태(state)를 관리할 수 있게 해준다!
import { useState } from 'react';
function ImageGallery() {
const [index, setIndex] = useState(0); // index에 0을 저장, setIndex로 값수정 가능
function handleClick() {
setIndex(index + 1); // index 수정
}
let sculpture = sculptureList[index]; // index 사용
// ...
}
JavaScript
복사
useState는 변수를 담는 변수와 수정하는 함수를 담는데, 수정하는 함수를 통해 state값이 수정된다면 해당 컴포넌트는 재렌더링이 된다.
useState 주의점
state의 변경은 즉각적으로 발생하지 않고 예약이 될 뿐이다.
state는 이전값을 참조하지 않을 경우 스케줄링으로 한번에 수행되기 때문에 setState가 최신의 값을 받지 못할수도 있다. 그렇기 때문에 state값을 갱신할때는 항상 이전값을 받아서 갱신해주는것이 좋다.
const [state, setState] = useState(0);
setState( state + 1 );
setState( state + 1 );
// state === 2 : false
// state === 1 : true
JavaScript
복사
이전값을 사용하지 않음
const [state, setState] = useState(0);
setState(prev => prev + 1);
setState(prev => prev + 1);
// state === 2 : true
JavaScript
복사
이전값을 사용
useEffect
NOTE
useEffect는 컴포넌트의 생명주기에 대응하는 Hook이다!
import { useEffect, useRef } from 'react';
function VideoPlayer({ src, isPlaying }) {
const ref = useRef(null);
useEffect(() => { // 컴포넌트가 렌더링될때 마다 재생여부 확인
if (isPlaying) {
ref.current.play();
} else {
ref.current.pause();
}
});
return <video ref={ref} src={src} loop playsInline />;
}
JavaScript
복사
•
컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 SIde Effect라고 한다.
◦
백엔드 서버 API 요청
◦
setTimeout, setInterval등 콜백함수
•
리액트에서는 state값이 변할때 마다 리렌더링되는데, Side Effect가 계속 계속 리액트에 관여하면 무한 푸르에 빠지게된다. 이를 해결하기위해 useEffect를 사용한다.
사용예시
useEffect(()=>{
// ...
}, [ ]);
JavaScript
복사
컴포넌트가 처음 렌더링 될 때 한번만 실행하고 싶을 때 (의존 인자값 빈 배열)
useEffect(()=>{
// ...
});
JavaScript
복사
리렌더링 될 때마다 실행됨 (의존 인자값 없음)
useEffect(()=>{
// ...
}, [ a, b, c ]);
JavaScript
복사
a 또는 b 또는 c 가 변경될 때 실행된다
useEffect(() => {
const connection = createConnection();
connection.connect();
return () => {
connection.disconnect();
};
}, []);
JavaScript
복사
return은 컴포넌트가 해제될때 동작한다.
useContext
NOTE
useContext는 하위 컴포넌트에게 context(컴포넌트가 참조할 수 있는 데이터모음)을 제공하는 Hook이다!
useContext는 Context API를 사용하기위해 쓰이며, Context API를 통해 컴포넌트간 간격없이 통신이 가능해지게 할 수 있다!(후에 리덕스로 대체됨)
const CurrentUserContext = createContext(null); // 컨텍스트 생성
export default function MyApp() {
const [currentUser, setCurrentUser] = useState(null); // 컨텍스트에 사용할 변수
// 최상위 페이지에 등록
return (
<CurrentUserContext.Provider
value={{
currentUser,
setCurrentUser
}}
>
<Form />
</CurrentUserContext.Provider>
);
}
function Form({ children }) {
return (
<Panel title="Welcome">
<LoginButton />
</Panel>
);
}
function LoginButton() {
const {
currentUser,
setCurrentUser
} = useContext(CurrentUserContext); // useContext를 통해 접근 및 수정
if (currentUser !== null) {
return <p>You logged in as {currentUser.name}.</p>;
}
return (
<Button onClick={() => {
setCurrentUser({ name: 'Advika' })
}}>Log in as Advika</Button>
);
}
function Panel({ title, children }) {
return (
<section className="panel">
<h1>{title}</h1>
{children}
</section>
)
}
function Button({ children, onClick }) {
return (
<button className="button" onClick={onClick}>
{children}
</button>
);
}
JavaScript
복사