POOL:US ) 부스 검색 기능(논리 연산자 &&)

가든 아일랜드 부스 페이지는 1. 부스 메인 2. 부스 리스트 컴포넌트로 나누었다.

<section className="display-container fullbgBag">
        <div className="GardenIsland good">
          {/* 부스 메인 */}
          <GardenMain onChange={handleSearch} />

          {/* 부스 리스트 렌더링 */}
          <Allbooth searchword={searchword} />
        </div>
    </section>

컴포넌트화해서 전체 가든 아일랜드 페이지는 이렇게 간략하게 표현된다.
이게 진짜 가독성이 좋은 것 같다. 리액트 최고

기능은
1. 전체 부스 렌더링
2. 검색어 입력시 검색어에 해당하는 부스만 출력
3. 각 부스 클릭시 모달창으로 메뉴판 출력

전체 부스 렌더링

{searchword === '' && (
        MenuData.map((booth) => (
        <Button key={booth.id} variant="" onClick={() => openModal(booth)}>
            <section className="gardenbooth" key={booth.id}>
                <div className="flexbooth">
                    <>                
                    <div className="listImg">
                    <img src="img/garden/boothimg.png" alt="부스이미지" />
                    </div>
                    <div className="boothlist">
                        {/* 학과별 부스*/}
                        <p className="boothtitle">{booth.department}</p>

                        {/* 메뉴 */}
                        <span className="boothmenu">
                        <>
                        {/* 메뉴가 너무 많은 부스들이 있어서 메뉴 3개만 보이도록 */}
                            {booth.menus.slice(0, 3).map((items)=> (
                                <>
                                {items.name} <span>  </span> <br/>
                                </>
                            ))} {/*booth.menus.length > 3 && " 등"*/}
                        </>
                        </span>
                    </div>
                </>
                </div>
            </section>
        </Button>
      )))}

첫번째 줄에서 논리 연산자를 사용했다.
논리 연산자 &&는 두 개의 피연산자가 모두 참일 때만 참(True)이다.
첫 번째 피연산자가 거짓(False)이면,
두 번째 피연산자의 평가를 하지 않고 거짓으로 전체 식을 평가하는 것이다.

이 논리를 이용해서 코드를 짰다.
뒤의 코드는 참, 거짓이 아니라 코드 그 자체이기 때문에
앞에 조건을 달아 그 코드를 실행하지 말지를 결정하도록 한 것

검색어가 입력되지 않았을 때(true), 전체 부스를 렌더링하고
검색어가 입력되면(false), 전체 부스 렌더링하는 코드를 무시하도록 했다.
(앞의 조건이 이미 거짓이기 때문에 && 뒤의 피연산자는 평가하지 않고 전체 식을 거짓으로 판단)

검색어 입력시 검색어에 해당하는 부스만 출력

{filteredBooth.length > 0 && searchword !== '' && (
        <SearchBooth 
            searchword={searchword}
            filteredBooth={filteredBooth} 
            selectedBooth={selectedBooth}
            openModal={openModal}
            closeModal={closeModal}
        />
        )}

앞에서 사용한 논리 연산자를 조건만 바꿔 같은 방식으로 사용했다.
논리 연산자 && 뒤의 코드는 앞의 조건이 참(True)일 때만 실행되는 것이다.

앞의 조건은

filteredBooth.length > 0 && searchword !== ''

filteredBooth의 길이가 0 이상이고(검색결과에 해당하는 부스가 있고)
검색창이 비어있지 않을 때(검색 중일 때), 검색된 결과에 해당하는 부스만 보여준다.

    // 학과, 메뉴 검색 필터링
    const filteredBooth = MenuData.filter((booth) =>
        booth.department.includes(searchword) ||
        booth.menus.some((item) =>
            item.name.includes(searchword)
    ));

filterBooth에는 전체 부스에서
1. 검색 단어를 포함하는 학과
2. 검색 단어를 포함하는 메뉴들만 걸러 남은 부스들만 담겨있다.

SearchBooth 컴포넌트(자식 컴포넌트)에 부모 컴포넌트(현재 컴포넌트)에서 사용한 값들을 Props로 넘겨주고 filteredBooth을 렌더링하도록 했다.

각 부스 클릭시 모달창으로 메뉴판 출력

{selectedBooth && (
        <Modal
          show={!!selectedBooth}
          onHide={closeModal}
          dialogClassName="modal-80w"
          aria-labelledby="example-custom-modal-styling-title"
          className="modalframe"
        >
          <Modal.Header closeButton>
            <Modal.Title id="example-custom-modal-styling-title">
            <MdOutlineFoodBank size="28" /> {selectedBooth.department}
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <section>
                {selectedBooth.menus.map((item)=> (
                  <div>
                      <span className="menuname">{item.name}</span><br />
                      <span className="menuprice">{item.price}</span>
                      <hr />
                  </div>
                ))}
            </section>
          </Modal.Body>
        </Modal>
    )}

각 부스를 클릭하면 selectedBooth에 해당 부스의 정보가 들어가고
selectedBooth가 존재할 때만 뒤에 오는 모달창을 띄우도록 했다.
selectedBooth가 참 값인 경우에만 조건이 충족되므로,
selectedBooth가 존재하지 않을 경우 Modal 컴포넌트는 렌더링되지 않는 것
(+ 모달창은 리액트 부트스트랩에서 제공하는 컴포넌트를 사용)

아무튼 이렇게 부스 검색 기능은 논리 연산자 &&을 활용하여
각 조건에 맞는 부스를 띄우도록 구현해봤다.

if문과 비슷한 개념이지만 더 편하고 간략하게 표현할 수 있어서
단순한 조건문이 필요할 때 사용하면 좋을 것 같다. 가독성 굿
하지만, 복잡한 조건문이나 여러 개의 조건이 필요할 때는 if문을 사용하자