122일차

• 리액트 공부하기

배운 내용 정리

1. js문법과 jsx문법 비교

  return React.createElement(
    "div", 
    {
      onClick: () => setFollowing(!following),
      style: following ? followingBtnStyle : followBtnStyle
    },
    following ? "following" : "Follow"
  )

  //JSX문법
  return <div onClick = {
    () => setFollowing(!following)
  }
  style = {
    following ? followingBtnStyle : followBtnStyle
  } > 
  {following ? "following":"Follow"}
  </div>;

2. 논리 연산자에서의 falsy

JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다. 단, falsy 표현식(ex: 0, '')을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환되게 됩니다.

<div>{count && <h1>Message: {count} </h1>}</div>

만약 count가 0인경우 0이 출력되게 됩니다.

만약 falsy가 아니라 false로 사용하고자 한다면 <div>{ !!count && <h1>Message: {count} </h1>}</div>와 같이 사용하면 됩니다.