FE.07 Day.07

김선우·2022년 6월 11일

Map Props State emotion filter setState style

state 리렌더 : state는 비동기적으로 작동하기 때문에 임시저장소에 모여있다가 한번에 렌더링이 일어난다.

state가 랜더링 되는경우

새로운 props가 들어올때

부모 컴포넌트가 렌더링 될 때.

강제업데이트가 실행될 때.

state가 변경될 때.


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>);
}

위의 코드에서 버튼을 눌러도 setState의 비동기적 특성 때문에 calue 값은 1씩 밖에 오르지 않는다.

router

router를 사용 할 때, 특히나 다이나믹 라우팅을 사용해야하는 상황이라면, 다이나믹 라우팅 폴더(freeboard의 [boardId])가 있는지 반드시 확인하고 사용해야 한다.

router.query를 사용할 때 콘솔창에 router.query를 찍어보고 본인이 원하는 요소를 꺼내 쓰는게 좋다.

주소를 설계하는 법

게시물 목록, 게시물 등록, 다이나믹 라우팅 표기,게시글 수정하기 주소

**게시물 목록** : /board

게시물 등록 : /boards/new

다이나믹 라우팅(특정 게시물 조회)

/boards/: id → :으로표기
/borads/{id} → {}으로 표기

**게시글 수정하기**

/boards/:id/edit
/boards/{id}/edit

emotion에 props 전달하기

emotion을 사용한 스타일 컴포넌트도 어딘가에 import 당하는 자식 컴포넌트이기 때문에, props를 전달받아 CSS를 변경 할 수 있다.

위에서 보다시피 onChange 함수를 사용해 클릭할 때마다 state값을 true, false로 변경 시켜주고, state 값에 따라 emtion 의 color 를 변경해준다.

더해서, 삼항연산자를 활용해 이러한 아래와 같은 형태로도 가능하다.

map, filter

for문 보다 더 많이 쓰이는 반복문 형태이다. 둘다 배열의 내장함수이기 때문에 배열과 함께 사용해야 한다.

1) map

const aaa =  ['원소1', '원소2', '원소3']
aaa.map((el) => (el + "은 aaa의 원소입니다."))

map 안에있는 el은 aaa의 원소들이 들어갈 매개변수이므로, 네이밍은 본인 맘대로 하면된다.

const RenderMap = ()=>{
const classmate = ["철수","영희","훈이"]
return(
{classmate.map( (item)=> <div>{item}어린이</div> )}
		) 
	}
export default RenderMap

위의 코드처럼 html에서도 적용이 가능하다.

2) filter

단어 그대로 특정 조건에 맞는 원소들만 필터링하는 배열의 내장함수이다.

const num = [1,2,3,4,5,6,7,8,9,10]
num.filter((item)=>(item<=8))
=> (8) [1, 2, 3, 4, 5, 6, 7, 8]

배열의 원소 중 8 이하인 원소들만 모은 배열이 결과 값으로 나온 것을 볼 수 있다.

refetchqueries

refetchqueries 는 기존에 받았던 데이터가 변경 되었을 경우 최신 데이터로 다시 fetch 해주기 위해 사용된다.

한 가지 예로, 게시물 목록에서 하나의 게시물을 삭제하게 된다면 삭제 된 게시물을 제외한 나머지 목록을 다시 fetch 해줘야 한다. 이럴 때 사용되는 것이 refetchqueries 이다.

//refetchQueries를 이용해 최신 데이터 받아오기

const deleteBoard = async () => {
	try {
		const result = await deleteBoard({
			variables: {
				boardId: router.query.boardId,
			},
			**refetchQueries: [
				{
					query: FETCH_BOARDS
				},
			]**
		});
	} catch (error) {
		console.log(error);
	}
};

위의 코드를 보면 useMutation 함수안에 refetchqueries라는 키가 있는 것을 확인 할 수 있는데, Apolllo에서 제공하는 기본 기능이다.

refetchQueries는 배열로 시작하여, 그 안에 어떤 query를 하고, 그 query의 variables가 무엇인지 다시 설정해주면 Mutation이 성공적으로 끝났을 경우 refetchQueries를 실행시켜준다.

map 사용시 주의사항

import { Test } from '../../src/test2';

export default function Test2() {
	const List = ['사과', '딸기', '바나나'];

	return (
		<>
			{List.map((data) => (
				<Test>{data}</Test>
			))}
		</>
	);
}