[React] 9. 장바구니 삭제 구현, 자주 쓰는 if문 패턴

강의를 듣기 앞서 장바구니 삭제 버튼도 구현해 보았다

//Cart.js
<Button
                      variant="danger"
                      onClick={() => {
                        dispatch({
                          type: "삭제",
                          payload: idx,
                        });
                      }}
                      style={{ margin: "auto", display: "block" }}
                    >
                      X
                    </Button>

버튼이 눌렸을때 "삭제" type을 보내고 payload로 해당 데이터 인덱스를 보내주었다.

//index.js
.
.
else if (액션.type === "삭제") {
    let copy = [...state];
    copy.splice(액션.payload, 1);
    return copy;
  }
.
.

state의 카피본을 만들고 splice함수를 이용해 데이터를 삭제해준다
액션.payload에는 해당 인덱스 값이 들어있다.
splice()의 첫번째 인자는 삭제를 시작할 인덱스, 두번째 인자는 삭제할 개수를 의미함
두번째 인자에 1 이 들어있으므로 액션.payload의 인덱스만 삭제 할 것

3번째 상품이었던 'dirty shoes'에 x버튼을 눌렀더니 해당 데이터가 삭제되었다

리액트에서 자주 쓰는 if문 패턴

1. 컴포넌트 안에서 쓰는 if/else

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
} 

자바스크립트 if문은 return() 안의 jsx 내에서는 사용 불가능!!
<div> if () {} <div> 이런거 안됨
그래서 보통 return + JSX 전체를 뱉는 if문을 작성한다.

2. 삼항연산자

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

설명은 생략한다.

3. &&연산자로 if문 대신하기

자바스크립트에서는 이상한 현상이 있는데 && 연산으로 비교할때 true와 false가 아닌 자료형을 넣으면

true && '안녕';
false && '안녕';

위의 코드는 '안녕'이 남고, 밑에 코드는 false가 남는다. 이걸 리액트에서 약간 악용하면 if문을 더 간략히 쓸 수 있단다

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

function Component() {
  return (
    <div>
      {
        1 === 1 && <p>참이면 보여줄 HTML</p>
      }
    </div>
  )
}

위의 두 예제는 동일한 역할을 하는데 밑의 예제에서 && 연산자로 조건식과 오른쪽 jsx자료를 비교하고 있다.
이 때 왼쪽 조건식이 true이면 오른쪽 jsx가 그자리에 남고 왼쪽 조건식이 false이면 false가 남음 (false가 남으면 html로 렌더링 하지 않기 때문)

4. 오브젝트 자료형을 응용한 enum

예를 들어 쇼핑몰에서 상품설명 부분을 탭으로 만든다 하자
현재 state가 info면 <p>상품정보</p>, state가 shipping 이면 <p>배송정보</p>, state가 refund면 <p>환불약관</p>을 보여주자는 것

if문이 아니라 js 오브젝트 자료형에도 내가 보여주고 싶은 html을 담을 수 있다.

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        { 
           info : <p>상품정보</p>,
           shipping : <p>배송관련</p>,
           refund : <p>환불약관</p>
        }[현재상태]
      }

    </div>
  )
} 

object 자료형으로 html을 다 정리해서 담은다음 마지막에 object{}뒤에 []를 붙여 'key값이 '현재상태' 인 자료를 뽑겠습니다' 라고 써놓은것

이제 현재상태의 변수가 'info'이므로 info항목에 저장된 p태그가 보여질 것이다.

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)