React | 탭 클릭 시 underline 생기게 하기

앙두·2023년 2월 4일

React

목록 보기

14/20

🔥 구현목표

👇🏻 완성코드✨

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

  const changeUnderLine = e => {
    setCurrentTab(e.target.value);
  };


// jsx 문법코드
return (
<CategoryBtnSedan
   title={currentTab}
   value="Sedan"
   onClick={changeUnderLine}
>
Sedan
</CategoryBtnSedan>
<CategoryBtnSuv
   title={currentTab}
   value="SUV"
   onClick={changeUnderLine}
>
SUV
</CategoryBtnSuv>
)

const CategoryBtnSuv = styled.button`
  display: inline-block;
  width: 150px;
  padding: 10px;
  border: none;
  background: #fff;

  text-align: center;
  font-size: 24px;
  font-weight: 500;

  cursor: pointer;
  border-bottom: ${props => (props.title === 'SUV' ? '4px solid #222' : '')};
`;

const CategoryBtnSedan = styled.button`
  display: inline-block;
  width: 150px;
  padding: 10px;
  border: none;
  background: #fff;

  text-align: center;
  font-size: 24px;
  font-weight: 500;

  cursor: pointer;
  border-bottom: ${props => (props.title === 'Sedan' ? '4px solid #222' : '')};
`;

메뉴버튼 클릭 시, 밑줄이 생기는 기능을 구현하고 싶었다.

처음에는 클릭 시에 boolean 값으로 관리하는 state를 하나 만들어서, true/false 값으로 조건을 걸어 스타일을 줬었다.

하지만, 그로 인한 부작용 🤯
1. 한번 true 값이 되면 쭉 true 값이 유지되어 영원히 밑줄이 그어져 있음
2. !state <- 토글방식으로 하면, 같은 버튼을 두번 누를 시에 밑줄이 계속 그 버튼에 있어야 하는데 다른 버튼으로 옮겨감

.
.
.
그렇게 state 도 나눠보고, 함수도 다르게 써봤지만 true/false 지옥에서 탈출하지 못했다.
이럴땐 멘토님 도움 요청 🚨
애초에 boolean 값으로 관리하면 안됐었다
틀 깨기. 생각의 확장.

👩🏻‍💻 jsx 문법 코드

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

  const changeUnderLine = e => {
    setCurrentTab(e.target.value);
  };


// jsx 문법코드
return (
<CategoryBtnSedan
   title={currentTab}
   value="Sedan"
   onClick={changeUnderLine}
>
Sedan
</CategoryBtnSedan>
<CategoryBtnSuv
   title={currentTab}
   value="SUV"
   onClick={changeUnderLine}
>
SUV
</CategoryBtnSuv>
)

tab을 관리하는 state를 하나 생성해준다 !
초기값은 페이지 첫 로드시 기본으로 밑줄이 그어져있는 첫번째 버튼명을 사용한다.
-> 'Sedan'
그리고 2개의 버튼태그에 title과 value 속성을 정해주고 title에는 state를, value에는 버튼명을 넣어준다.
-> 현재 두 버튼의 title 값은 'Sedan'임 = state 초기값.
버튼 클릭 시, 실행될 함수를 작성해준다.
-> onClick 이벤트가 일어나는 태그의 value 값을 setState에 넣어준다.
=== 클릭하는 버튼태그의 value 값이 state 값이 되는 것!
버튼 컴포넌트에 title은 곧 해당 Styled-Component에 props로 전달가능

👩🏻‍💻 Styled-Components 코드

const CategoryBtnSuv = styled.button`
  display: inline-block;
  width: 150px;
  padding: 10px;
  border: none;
  background: #fff;

  text-align: center;
  font-size: 24px;
  font-weight: 500;

  cursor: pointer;
  border-bottom: ${props => (props.title === 'SUV' ? '4px solid #222' : '')};
`;

const CategoryBtnSedan = styled.button`
  display: inline-block;
  width: 150px;
  padding: 10px;
  border: none;
  background: #fff;

  text-align: center;
  font-size: 24px;
  font-weight: 500;

  cursor: pointer;
  border-bottom: ${props => (props.title === 'Sedan' ? '4px solid #222' : '')};
`;

밑줄이 될 border-bottom 속성에서 title을 props로 받아준다.
버튼을 클릭할 때마다 props.title이 해당 버튼명으로 바뀌고 있다.
-> 복습 : onClick 이벤트에 할당된 함수실행으로 e.target.value 가 계속 setState에 들어가고 있음!
props.title 이 Sedan이면 밑줄. 아니면 주지마.
props.title 이 SUV이면 밑줄. 아니면 주지마.