inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

Slack 클론 코딩[실시간 채팅 with React]

header에서 a태그 들어간 후 해당 접속 중인 페이지 header a태그 색 바꾸기

267

minsu

작성한 질문수 27

0

안녕하세요 제로초님 제가 Header 에 있는 a태그들을 지금 들어가 있는 페이지이라면? 

해당 a태그를 검정색으로 지정 해 주고 싶습니다.

제가 스타일컴포넌트를 이용하고 삼항 연산자를 이용 해 적용 했는데 반응 하지 않습니다.

왜 그럴까요 ㅠㅠ.

 


const Header = () => {

const location = useLocation();

const SLink = styled(Link)`
color: ${location.pathname ? "#4e5968" : "#000000"};
cursor: pointer;
`
console.log(location.pathname); // 순서 a링크 클릭 -> /order
return (
<>
<Headers>
<div>
<h1>제로초짱</h1>
<Ul>
<li>
<SLink to="/order">순서</SLink>
</li>
<li>
<SLink to="/">메인 페이지</SLink>
</li>
<li>
<SLink to="/rotationservice">환불</SLink>
</li>
</Ul>
</div>
</Headers>
</>
);
};

export default Header;

 

 

 

웹팩 Socket.io babel typescript react 클론코딩

답변 1

1

제로초(조현영)

저런 식으로 하시면 SLink가 계속 생성될뿐더러 원하는 타이밍에 값을 바꾸기 어려워집니다. 

<SLink pathname={location.pathname} to="/">...

이런 식으로 props로 전달하고 Header 바깥에서 SLink를 선언해서

cost SLink = styled(Link)`
  color: ${(props) => props.pathname ? '' : ''}
`;

const Header = ...

0

minsu

선생님이 알려 주신 데로 해 봤는데 자꾸 에러가 납니다 ㅠㅠ 

<SLink pathname={location.pathname} to="/order">순서</SLink>

pathname 쪽에서 빨간색 밑줄이 뜨네요. 

{ children: string; pathname: string; to: string; }' 형식은 'IntrinsicAttributes & LinkProps & RefAttributes<HTMLAnchorElement> & { theme?: Theme | undefined; } & { ...; }' 형식에 할당할 수 없습니다.
'IntrinsicAttributes & LinkProps & RefAttributes<HTMLAnchorElement> & { theme?: Theme | undefined; } & { ...; }' 형식에 'pathname' 속성이 없습니다.ts(2322)

 

SLink 를 선언 한 곳에서도 props pathname쪽에서 빨간색 밑줄이 나옵니다 

'LinkProps & RefAttributes<HTMLAnchorElement> & { theme?: Theme | undefined; } & { theme: Theme; }' 형식에 'pathname' 속성이 없습니다.ts(2339

 

const SLink = styled(Link)`
color: ${(props) => props.pathname ? "#4e5968" : "#000000"};
cursor: pointer;
text-decoration: none;
display: inline-block;
position: relative;
`
<SLink pathname={location.pathname} to="/order">순서</SLink>

0

제로초(조현영)

styled(Link)<{ pathname?: string }>`

타입 선언도 같이 해보세요.

0

minsu

했습니다. 하지만 모든 SLink 태그에서 전부 다 rgb(76, 194, 111)로 출력되네요. ㅠㅠ

지금 접속 한 페이지에서만 rgb색을 부여하고 아닌 페이지에서는 #4e5968을 부여해야 하는데.. 

const SLink = styled(Link)<{pathname?: string }>`
color: ${(props) => props.pathname ? "rgb(76, 194, 111)" : "#4e5968"};
cursor: pointer;
text-decoration: none;
display: inline-block;
position: relative;
`
 
 
<Ul>
<li>
<SLink pathname={location.pathname} to="/order">순서</SLink>
</li>
<li>
<SLink pathname={location.pathname} to="/">메인</SLink>
</li>
<li>
<SLink pathname={location.pathname} to="/rotationservice">환불</SLink>
</li>
</Ul>

0

제로초(조현영)

애초에 그러면 location.pathname === '/order' 이런 비교문을 넣으셔야죠

기본 셋팅과 관련하여

0

106

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

109

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

165

2

useEffect 개수 관리

0

122

2

라이브러리 서치 방법

0

118

2

함수 정의 패턴

0

80

1

npm run dev 에러

0

156

3

npx webpack 후 에러

0

187

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

151

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

192

2

초기세팅중 packge.json 에러떠요

0

162

2

CORS - Access-Control-Allow-Origin 누락 문제

0

439

3

로그인 페이지 무한 새로고침 현상

0

608

2

Module not found: Error: Can't resolve './App' 에러

0

970

1

배포 방법

0

306

2

npm run dev 시 빌드가 매우 느려졌습니다

0

1010

2

alias 경로 설정 오류

0

461

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

282

1

제네릭 질문

0

225

2

ts-node 대신 tsx 사용여부

0

377

1

배포 관련 질문

0

249

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

395

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

341

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

252

2