State 리렌더
setstate는 비동기로 작동한다.
setState가 동기로 작동하게되면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적이다.
따라서, 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링한다.
📌 리렌더 되는 상황
1. 새로운 props가 들어올 때
2. 부모 컴포넌트가 렌더링 될 때
3. 강제 업데이트(forceUpdate)가 실행될 때
4. state가 변경될 때
📌setstate의 비동기적 특성`
아래 코드의 버튼을 클릭하면 1이 나타난다.
(동기적으로 작동했다면 코드를 읽고 바로 내려가서 또 1을 더하고 또 1을 더해 3이 나왔을 것)export default function stateTest(){ const [value,setValue]=useState(0) const onClick = () => { setValue(value+1) setValue(value+1) setValue(value+1) } return ( <div className="App"> <button onClick={onClick}>+</button> <h1>{value}</h1> </div>); }
map / filter
실무에서는 반복문을 사용할 때 for문 보다는 map / filter 를 더 많이 사용한다.
map, filter는 배열의 내장함수 이기때문에 반드시 배열과 함께 사용해야 한다.
1. map
map은 배열의 원소를 일괄적으로 변형시킬 때 사용하기 좋다.
["철수", "영희", "훈이"].map((el) => (el + "어린이"))
// ['철수어린이', '영희어린이', '훈이어린이']
["철수", "영희", "훈이"].map(el => el + "어린이") // 코드가 한줄이거나 return이 없을 경우 괄호 생략 가능
// ['철수어린이', '영희어린이', '훈이어린이']
["철수", "영희", "훈이"].map((el) => {
return { name: el } // 코드가 한줄 이상이거나 리턴값이 객체인 경우엔 괄호 생략 불가능
})
//[ {name: '철수'}, {name: '영희'}, {name: '훈이'} ]
["철수", "영희", "훈이"].map((el) => ({ school : "떡잎유치원" }))
// [
// {name: '철수', school: '떡잎유치원'},
// {name: '영희', school: '떡잎유치원'},
// {name: '훈이', school: '떡잎유치원'}
// ]map함수를 사용하여 게시글 목록 조회 만들기
Fragment를 만들어 감싸 준 후,
map 함수를 통해 반복될 부분에 적용시켜준다.
이때, 데이터의 Id와 같은 고유한 값으로 key값을 주어야 한다.
📌 key값을 주는 이유
React에서는 기존 데이터와 바뀐 데이터를 비교하여 바뀐 부분을 화면에 그려준다.
이 부분에서 고유한 key값이 없다면 모든 데이터를 비교해야 하지만, key가 있으면 key가 추가됐는지, 삭제됐는지만 비교하기 때문에 불필요한 비교나 렌더링을 없애준다.
따라서, key는 안정적인 고유성을 위해중복되지 않는 값으로 지정해줘야 한다.
만약 key를 지정하지 않을 경우, index를 key로 사용한다. 그러나 이는 좋은 방법이 아니다.
map에 있는 모든 데이터에 id가 없을 경우 index를 사용해도 되지만, 위의 예시에서는 그렇지 않으므로 index를 key값으로 사용하면 안된다.
2. filter
filter는 배열의 원소를 필터링해주는 메서드이다.
const num = [1,2,3,4,5,6,7,8,9,10]
num.filter((item) => (item <= 8))
// [1, 2, 3, 4, 5, 6, 7, 8]refetchQueries
refetchQuery는 기존에 받아왔던 데이터가 변경 되었을 경우, 최신 데이터로 다시 fetch 해주기 위해 사용한다.
위의 예시와 같이 게시판 상세보기에서 삭제버튼을 눌러 게시글을 삭제했을 경우 데이터가 변경되었기 때문에, refetchQueries 를 사용하여 최신 데이터로 다시 fetch해준다.
refetchQueries는 배열로 시작해서, 그 안에 어떤 query를 하고, 그 query의 variables가 무엇인지 다시 설정해주면 Mutation이 성공적으로 끝났을 경우 refetchQueries를 실행시켜준다.
📌 refetchQueries에서의 variables
기존의 fetch 부분에서 보내준 variables가 없다면 따로 적지 않아도 되지만, 만일 보내준 variables가 있다면 refetchQuerise부분을 아래와 같이 작성해야 한다.refetchQueries: [{ query : FETCH_BOARDS, variables : { 기존의 fetch때 보내준 것} }]
