react nodeBird 1-3(styled-components)

components/LoginForm.js

콘솔로 확인하면 값이 false인걸 알 수 있다.

 

return 안에 <div> 같은 태그 안에 {}(객체)안 CSS를 넣으면 안되는 이유는 리렌더링 되기 때문입니다. 렌더링은 처음엔 전체를 한번 렌더링되고, 리렌더링할 때 이전과 변경된 부분을 비교하여 변경된 객체가 있다면 변경된 항목만 다시 그려줍니다.

또한, 콘솔에서 {} === {}을 확인해보면 false로 나오는 것을 알 수 있습니다. 그래서 styled-components를 통해 이 부분을 막을 수 있습니다. 하지만, 성능에 문제가 되지 않는다면 쓰지 않아도 무방합니다. 

터미널 명령어로 설치해보자

사용방법은 간단합니다. const 변수명 = styled.선택자` color: red `; 코드를 작성하면 됩니다. 쓰고자하는 선택자를 styled. 뒤에 선택자를 써주면 되고, component 경우에는 styled(이안에) 괄호안에 써주면 됩니다.

  styled-component를 사용하기 싫다면 값을 캐싱해주는 리액트의 useMemo를 이용하면 됩니다. 

styled를 쓰기 싫다면 useMemo도 같이 사용해보자