8. Context
https://react.dev/reference/react/createContext (부모입장)
https://react.dev/reference/react/useContext (자식입장)
1) 개요
- prop drilling 현상 방지
- lifting state up 패턴 기반
2) 구현
(1) 부모 작업
import {createContext} from 'react';
- 저장소 생성
const UseContext = createContext(기본값); // 컨텍스트명은 대문자로 지정하기. 컴포넌트 형태로 사용됨 - state 생성
const [name, setName] = useState(''); - 자식 컴포넌트가 사용할 수 있도록 설정
function App() {
return(
<UseContext.Provider value={name}>
<Child />
</UseContext.Provider>
);
}(2) 자식 작업
import {useContext} from 'react';
const value = useContext(UserContext);
9. Side Effect (부수 효과)
1) 개요
현재 랜더링되는 기본적인 프로세스에 영향을 미치지 않는 특별한 기능처리 담당
2) 문법
import { useEffect } from 'react';
useEffect( 부수 함수 , [변수값] | [ ] ); // 리턴하는 게 없다
// 빈 배열이면 한 번, 채워진 배열이면 변수값인 state가 변경될 때마다 실행된다
3) 옵션에 따른 실행
- : 부수 함수가 단 한 번 실행
- [state] : state가 변경될 때마다 부수 함수가 재실행됨
- 지정 안 함 : App가 재랜더링될 때마다 부수 함수가 재실행됨
4) 특징
- 부수 함수는 바로 실행되지 않고 App이 모두 실행되어 랜더링이 끝난 후 실행된다
- 훅과 다르게 리턴값이 없고 컴포넌트가 다 랜더링 된 후에 실행됨
- 하고자 하는 기능의 초기화 작업을 할 수 있음
import { useEffect, useRef } from 'react';
function App() {
const xxx = useRef(null);
useEffect(()=>{
xxx.current.focus()
}, []);
// 훅과 다르게 리턴값이 없고 컴포넌트가 다 랜더링 된 후에 실행됨
// 하고자 하는 기능의 초기화 작업을 할 수 있음
return (
<div className="App">
아이디 : <input type="text" ref={xxx}/><br/>
비번 : <input type="text"/><br/>
</div>
);
}
export default App;
5) clean-up
- return cleanup기능 함수;
- cleanup 함수는 맨 처음 실행할 때 실행 안 됨
다음 부수 함수가 실행되고 실행이 된다 - [] 빈 배열 옵션을 사용하게 되면 clean-up은 작동되지 않는다
import {useEffect, useState} from 'react';
function App() {
const [num, setNum] = useState(0);
useEffect(()=>
// 부수 기능
{
console.log("useEffect1")
// clean-up
return ()=>{console.log("clean-up")};
}
);
function up(){
setNum(num+1);
}
console.log("App");
return (
<div className="App">
값 : {num}<br/>
<button onClick={up}>+</button>
</div>
);
}
export default App;10. 서버 연동
1) 사용 방법
- async / await fetch 함수
==> JS에서 기본적으로 제공하는 함수 - 외부 라이브러리
==> axios
npm install axios
2) 서버 연동하는 코드는 외부 파일로 작성하고 필요시 import 해서 사용하자
HttpService.js
export async function fetchUserList(n){
var url = `https://reqres.in/api/users?page=${n}`;
var response = await fetch(url);
var json = await response.json();
var userList = json.data;
return userList;
}
export async function fetchUserUpdate(){
}
// POST 및 PUT 요청은 반드시 다음과 같은 코드를 사용해야 된다
export async function fetchUserSave(user){
var url = `https://reqres.in/api/users`;
var response = await fetch(url, {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(user) // 우리가 넘기려는 것
// JSON.stringify : 데이터를 JSON 형식으로 넘겨주는 것
}3) 예외 처리
(1) 예외처리용 컴포넌트 작성
==> App.js에서 import 해서 사용
==> 예외 발생시 랜더링됨
function ResponseError({message}){
console.log(message);
return(
<>
<h2>에러 페이지</h2>
{message.message}
</>
);
}
export default ResponseError;4) 삭제하기
- 로컬에서만 삭제하기
// 삭제 - 모달창 이용해서 확인
function handleRemove(del_id) {
console.log("App.handleRemove", del_id);
setSelectedId(del_id); // 삭제를 누른 ID를 selectedId state에 저장해준다
setModalIsOpen(modalIsOpen => !modalIsOpen);
// (!modalIsOpen)이랑 뭐가 다른겨?
}
function handleRemoveConfirm() {
console.log("App.handleRemoveConfirm", selectedId);
setModalIsOpen(false);
// filter 사용하기 !!!!!! 자주 쓰니까 알아두기 !!!!!!!!!
// 삭제할 애를 뺀 나머지를 불변 객체로 만들기
var new_userlist = userList.filter((row, idx) => row.id !== selectedId);
console.log(new_userlist);
setUserList(new_userlist);
}5) 추가하기
- SPA (Single Page Application)
