코드 캠프 09일차) props, state, refetchQueries

지난 주에 비해 체력이 떨어진 것 같다... 1 주 전만 해도 3~4시간만 자도 많이 피곤하지 않았는데.. 오늘 몇 번을 졸았는지 모르겠다.. 힘내자

---

오늘의 목차

1. SetState
2. refetch
3. key / index

CSS-in-JS: props를 이용한 동적 스타일링

styled-component로 만들어진 style 태그에 props를 임의로 주고 동적으로 스타일링을 할 수 있다.

export const Label = styled.div`
	border: 1px solid ${(props) => {
      return props.mainColor;
    };
`

.
.
.
import {Label} from "styles.js";

<Label mainColor={red}>hi</Label>

state 작동 원리

const [state, setState] = useState();

setState()가 실행되고 state값이 이전 값과 같으면 변경하지 않고 같지 않으면 변경된 값을 state에 지정하고 전체 컴포넌트를 다시 실행시킨다 즉, 렌더링한다.

만약 한 번의 이벤트로 같은 setState()가 여러번 실행된다면?

function onClickButton = () => {
 	setState(1)
  	setState(2)
  	setState(3)
    setState(4)
    setState(5)
    setState(6)
}

리액트에서는 state값이 변경될 때 마다 해당 컴포넌트 리렌더링을 일으키는데 비동기적으로 일어나게 된다. 이렇게 한 번에 여러 번의 변경이 있으면 컴포넌트 자동 최적화를 위해 앞의 변경들은 무시되고 마지막만 렌더링이 일어난다.

그러므로 앞의 1~5 까지의 변경에 의한 리렌더링은 무시되고 마지막 setState() 부분만 리렌더링이 실행된다.

refetchQuries 에 대하여

setMutation 함수를 사용할 때 서버에 CRUD를 요청하는데 Read를 제외하고 나머지는 서버의 데이터를 변경시킨다. 변경 + 변경 후 데이터 불러오기 를 같이 실행하고 싶을 때 refetchQueries를 사용하면 될 듯 하다.

예를 들어, Delete를 요청해서 항목을 삭제한 후 (삭제된) 변경사항이 담긴 데이터를 바로 다시 쿼리로 받아오고 싶을 때 refetchQueries를 사용하면 가능하다.

const onClickDeleteButton = async () => {
	 await DeleteProduct({
     	variables:{
     		id: deleteProduct_id
     	},
        refetchQueries: [{query: FETCH_PRODUCTS}],
     });
};

<>와 <Fragment>의 차이

<> </> 태그 안에 속성을 추가하지 못한다.
<Fragment attr> </Fragment> 태그 안에 속성을 추가할 수 있다.

다크모드 라이트모드

키워드 검색해보기 : ThemeProvider