[react]조건부 렌더링

리턴 부분에

return(
	{state
		?(
			<>
			<div>true</div>
			</>
		)
		:(
			<>
			<div>false</div>
			</>
        )
     }
)

이렇게 삼항연산자를 써서 state 값이 true 냐 false 이냐에 따라서 렌더링하는 방법도 있고

 

  const rendering = (state) => {
    switch(state){
      case 0:{
          return(
            <Text size="tiny" message style={{ marginTop: "-10px" }}>
                추가할 상품이 존재하지 않습니다.
              </Text>
          )
      }
      case 1:{
        return(
              <div
                style={{
                  position: "relative",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center"
                }}
              >
                <Text size="tiny" message>
                  상품이 장바구니에 추가되었습니다.
                </Text>
                <Button subButton>장바구니 바로가기</Button>
              </div>
        )
      }
      case 3:{
        return(
          <Text size="tiny" message style={{ marginTop: "-10px" }}>
              이미 장바구니에 담긴 상품입니다.
            </Text>
        )
    }
    }
  }
  
  
  -----------------------------
  
  
  return({rendering(state)})

이런식으로 분리해주는 방법도 있슴.