[TIL-185] MyView 프로젝트 - JSX와 Javascript

JSX

문제 상황

삼항조건 연산자를 사용하여 렌더링할 컴포넌트를 다르게 구성하고 싶었다.

function MovieCard({ addCard }) {
  return (
    <>
      {addCard ? (
        <AddCardBox>
          <AddBtn />
        </AddCardBox>
      ) : (
        <CardBox>
         ...
        </CardBox>
      )}
    </>)
}

그래서 위와 같이 {} 안에서 props로 받은 addCard를 조건식으로 사용하여 삼항조건 연산자를 사용했는데 에러가 뜨면서 빨간 밑줄이 떴다. addCard부터 쭉 문제가 되는 것 같았다. 그리고 props로 받은 addCard를 사용하고 있는데 사용되고 있지 않다는 의미로 흐린 색깔이 되어있었다.

 

해결

function MovieCard({ addCard }) {
  return (
    <CardBox>
      {addCard ? (
        <AddBtn />
      ) : (
        <CardContent>
         ...
        </CardContent>
      )}
    </CardBox>
  )
}

이렇게 어떤 컴포넌트가 감싸고 있는 경우, 그 안에서 렌더링할 구성요소를 다르게 반환할 때 위와 같이 {} 안에서 자바스크립트 문법인 삼항조건 연산자를 사용하면 된다. 무슨 차이가 있어서 에러가 나는지 고민해봤다.

function MovieCard({ addCard }) {
  return addCard ? (
    <AddCardBox>
      <AddBtn />
    </AddCardBox>
  ) : (
    <CardBox>
      ...
    </CardBox>
  );
}

return부 안에서 ( <> </> ) 형태로 부모자식 관계가 중첩된 컴포넌트를 반환할 때 () 안은 JSX 문법을 따르게 된다. 따라서 그 안에서 자바스크립트 문법을 사용하려면 {}가 필요하다. 그런데 지금 상황은 return부에서 JSX 문법이 시작되기 전에 삼항조건 연산자를 이용한 조건식이 나오고, 그 안의 각 항에 JSX 문법의 컴포넌트가 반환값으로 들어간다.

그래서 맨 처음 코드에서는 우선 <> 프래그먼트가 필요하지 않고, 그렇게 되면 JSX 문법이 아니기 때문에 {} 안에 addCard를 조건식으로 하는 삼항조건 연산자 구문이 들어가는 것이 문법적으로 이상해진다. props로 받은 addCard가 사용중이지 않았던 이유가 이것이다.