3강 — useEffect와 바깥 세상
2024 DTC
| → / Space | 다음으로 |
| ← | 이전으로 |
| ↓ / ↑ | 같은 주제 안에서 단계 이동 |
| O | 전체 슬라이드 한눈에 보기 |
| F | 전체화면 |
아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다
| useState | 바뀌면 화면도 바뀌는 값 |
| 불변성 | 고치지 말고 새로 만든다 |
| 끌어올리기 | 값은 아래로, 변경은 위로 |
오늘은 React 바깥과 이야기합니다
useEffect 의 의존성 배열을 이해한다컴포넌트가 하면 안 되는 일
컴포넌트의 일은
JSX를 돌려주는 것 하나뿐
같은 props와 state라면 항상 같은 결과여야 한다
function Profile() {
const [user, setUser] = useState(null);
fetch("/api/user") // 렌더링 중에 호출
.then((r) => r.json())
.then(setUser);
return <p>{user?.name}</p>;
}
렌더링 중에 fetch를 부르면 어떻게 될까요?
렌더링이 끝난 뒤에 실행하려면
import { useEffect } from 'react';
useEffect(() => {
// 렌더링이 끝난 뒤 실행할 코드
}, [의존성]);
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("실행됨");
}, []);
return <button onClick={() => setCount(count + 1)}>
{count}
</button>;
}
언제 다시 실행할지 정하려면
| [ ] | 처음 한 번만 |
| [count] | count가 바뀔 때마다 |
| 없음 | 렌더링될 때마다 (매번) |
useEffect(() => {
console.log("count:", count);
}, [count]);
useEffect(() => {
console.log("실행");
}); // 배열이 없음
useEffect(() => {
setCount(count + 1);
});
여기서 effect가 state를 바꾸면?
벌인 일을 치우려면
useEffect(() => {
setInterval(() => {
console.log("1초");
}, 1000);
}, []);
화면을 떠나면 이 타이머는 어떻게 될까요?
useEffect(() => {
const timer = setInterval(() => {
console.log("1초");
}, 1000);
return () => clearInterval(timer);
}, []);
return서버에서 받아 화면에 그리려면
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("/api/users")
.then((r) => r.json())
.then(setUsers);
}, []);
useEffect(() => {
async function load() {
const r = await fetch("/api/users");
setUsers(await r.json());
}
load();
}, []);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// 로딩 중 / 실패 / 성공
if (loading) return <p>불러오는 중…</p>;
if (error) return <p>실패했습니다</p>;
return <UserList users={users} />;
불러오는 중…
useEffect(..., []) 안에서async 를 직접 붙이지 않는다오늘 배운 것
| 부수 효과 | 화면 그리기 말고 딴 일 |
| useEffect | 렌더링이 끝난 뒤 실행 |
| [ ] | 처음 한 번만 |
| [값] | 그 값이 바뀔 때마다 |
| return () => {} | 정리 함수 |
| 로딩 / 실패 / 성공 | 데이터는 항상 세 상태 |
할 일 목록 이어가기
localStorage + useEffect)API는 jsonplaceholder.typicode.com 을 씁니다
4강에서는 커진 앱을 정리합니다