react 렌더링이 늦는 것

안녕하세요.

jsx 에서 아래의 코드는 post 값이 참(true) 으로 판정받을 때에 PostLayout 컴포넌트를 렌더링합니다.

post && <PostLayout post={post} />

js 에서 boolean 외에도 다양한 타입의 값들로도 참/거짓 판정을 할 수 있는 데요.

undefined 나 0 혹은 빈 문자열은 거짓 판정을 받습니다. 이를 확인하는 방법은 js 콘솔에서 각 값 앞에 느낌표(!)를 2개 붙여보세요. 느낌표는 해당 값의 부정한 값을 반환합니다. 그럼 그 값의 참/거짓 판정을 알 수 있습니다.

!!undefined 값은 false이며, !!0 그리고 !!"" 값도 false 입니다.

그런데 !!{} 과 !![] 은 true 입니다. 즉 {} 은 참 판정을 받기 때문에 post 가 {} 일 때에도 PostLayout 이 렌더링되었던 것입니다.

post 상탯값의 초기값을 {} 이 아니라 undefined 로 지정하는 것도 한 방법입니다.

화이팅입니다. :-)