TIL : 심화프로젝트

NavBar 선택했을 때, style 적용하기

Nav 메뉴를 선택했을 때, 해당 카테고리로 이동은 하지만 NavBar에는 별다른 표기가 없어서
hover했을 때 주었던 style을 적용하여 해당카테고리가 선택됨을 표시하고 싶었다.

삼항연산자를 이용해 인라인으로 스타일을 주려고 하니까, 적용해야할 스타일이 여러개여서 그런지 오류가 떴다. 그래서 팀원분께 여쭤봐서 문제를 해결했다.

해결방법은 아래와 같다.

  const nowCategoryStyle = {
    borderBottom: '3px solid #fff',
    marginBottom: 0,
    fontWeight: 700,
  };

스타일을 변수안에 넣어주고,

<NavMenu
	onClick={() => setCategory('training')}
    style={category === 'training' ? nowCategoryStyle : null}
 >홈트레이닝</NavMenu>

style을 변수명으로 넣어주니 삼항연산자를 써도 더 이상 오류가 일어나지 않았다.