[TIL] Day7

state 리렌더

setstate는 비동기로 작동한다.
만약 setState가 동기로 작동하게되면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적
해결방법 ? 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링

리렌더가 되는 상황

1. 새로운 props가 들어올 때
2. 부모 컴포넌트가 렌더링 될 때
3. 강제 업데이트(forceUpdate)가 실행될 때
4. state가 변경될 때

컴포넌트 안에서 router를 사용할 때 주의사항

라우터가 있는 컴포넌트를 재사용 할 때 다이나믹 라우팅 폴더[aaa]가 있는지 확인
폴더가 없는곳에 router.query를 가지고 가면 오류 발생

👏 콘솔에 router.query 찍어서 안에 있는 내용 확인하기

클릭에 따라 색상 바꾸기

div를 클릭할 때마다 handleOnClick함수가 실행되어 isTrue의 값이 true / false 로 바뀌면 색상이 바뀌게 됨

export const Test = styled.div`
	color: ${(props) => (props.isTrue ? 'pink' : 'yellow')};
`;

삼항 연산자를 통해 true일 때와 false일 때를 구분해준다.

오늘 공부를 돌아보며

게시물 삭제 기능 구현 실습
map과 filter

db에 게시물이 하나도 없으면 없다고 알려주는 부분이 필요할 것 같다는 생각을 했따.
게시물이 없어서 화면에 아무것도 안뜨는건데 오류인 줄 알고 여러 명이 붙어서 고민을 했었다...ㅎ