버튼에 따라 다른 UI 구현하기

클론코딩을 했던 배민문방구 사이트에서는 상품정보, 기본정보, 상품후기 버튼 클릭 시 다른 ui를 보여주고 있었다.

우리 사이트의 유저가 사용하기에도 적절하다고 생각되어 그대로 진행을 하자고 기획을 했다.

 

객체로 값 관리하기

상품정보는 first, 기본정보는 second, 상품후기는 third로 키값을 지정해주고 value 부분에는 각각에 해당하는 ui를 넣어주었다.

지금 생각해보니 first, second, third로 변수를 지정하기보다 각각에 맞는 변수 이름을 지어주는것이 더 좋았을 것 같다.

value에는 코드가 길어질 경우 컴포넌트로 분리해서 넣어주었다.

const MAPPING_OBJ = {
  First: <ProductInfo />,
  Second: <RegularInfo />,
  Third: <p className="non">앗!! 후기가 없어요 ㅠㅠ</p>,
};

 

useState로 변경되는 값 저장하기

버튼을 클릭하면 그에 해당하는 값을 저장할 수 있도록 useState로 관리했다.

초기값을 first로 지정해 첫번째 화면에는 상품정보가 나올 수 있도록 구현했다.

const [currentTab, setCurrentTab] = useState('First');

 

JSX로 UI 구현하기

버튼마다 onclick event를 달아주고 클릭 시 해당하는 값이 들어갈 수 있도록 구현했다.

그리고 버튼 밑에는 객체 값을 대괄호로 접근해 key 값이 입력되면 key 값에 해당하는 value가 그려지도록 구현했다.

      <div className="detail">
        <button className="detailBtn" onClick={() => setCurrentTab('First')}>
          상품정보
        </button>
        <p className="gray">|</p>
        <button className="detailBtn" onClick={() => setCurrentTab('Second')}>
          기본정보
        </button>
        <p className="gray">|</p>
        <button className="detailBtn" onClick={() => setCurrentTab('Third')}>
          상품후기
        </button>
      </div>
      <div className="contents">{MAPPING_OBJ[currentTab]}</div>

 

학원에서 버튼을 누르면 색상이 바뀌는 버튼을 구현하는 과제를 내준적이 있는데 그것과 상당히 유사해서 어렵게 느껴지진 않았다.

하지만 객체를 사용해서 ui 전체를 바꿔주는 부분은 처음 구현해보았다.

객체를 대괄호를 통해서 접근을 하고 그 부분을 JSX 에서 불러내 사용한다는 점이 신선했다 자주 써봐야겠다.