[Project] React 컴포넌트 만들기 (2)

Project

팀 프로젝트 컴포넌트 만들기

React 팀 프로젝트

컴포넌트 만들기

Navigation Components

• NavigationUser

  <LinkElement to="/">
    {location === '/' ? (
      <ChatIcon width="20" height="20" {...selectedAttr} />
      ) : (
        <ChatIcon width="20" height="20" />
      )}
      <NavName isHere={location === '/'}>번역 요청</NavName>
    </LinkElement>
    <LinkElement to="/list">
      {location === '/list' ? (
        <ChatIcon width="20" height="20" {...selectedAttr} />
      ) : (
        <ChatIcon width="20" height="20" />
      )}
      <NavName isHere={location === '/list'}>내 견적</NavName>
    </LinkElement>
    <LinkElement to="/chat">
      {location === '/chat' ? (
        <ChatIcon width="20" height="20" {...selectedAttr} />
      ) : (
        <ChatIcon width="20" height="20" />
      )}
      <NavName isHere={location === '/chat'}>내 상담</NavName>
    </LinkElement>
  </NavContainer>
  

  NavLink를 쓸 수 있지만, active 시 하위 컴포넌트 중 svg도 완전히 바뀌어야 하기 때문에 Link로 하고 attribute를 동적으로 주었다.

SVG 색상 변경

SVG 컴포넌트에 fill 어트리뷰트로 색상을 전달하였으나 변경이 되지 않아 svg 파일을 확인하여 fill 어트리뷰트 위치를 바꾸어 주었다.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#36c">
	<title>
		speech bubbles
	</title>
	<g>
		<path d="M18 4h-1v7a2 2 0 0 1-2 2H4v1a2 2 0 0 0 2 2h10l4 4V6a2 2 0 0 0-2-2z"/>
		<path d="M14 0H2a2 2 0 0 0-2 2v14l4-4h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
	</g>
</svg>

fill 속성이 적용될 수 있도록 svg 태그에 올려두었다. 원래는 g태그에 있었다.

Header Components

Error

svg import error

SVG 파일을 가져오려고 그대로

import { ArrowbackIcon } from "../../assets/icons/ArrowbackIcon.svg";

를 하였는데 다음과 같은 에러가 발생했다.

InvalidCharacterError: Failed to execute ‘createElement’ on ‘Document’: The tag name provided (‘/assets/icons/ArrowbackIcon.svg’) is not a valid name.

찾아보니 SVG를 컴포넌트로 사용하려면 React component 로 불러야 한다고 한다.

따라서 아래와 같이 수정해주었다.

import { ReactComponent as ArrowbackIcon } from "../../assets/icons/ArrowbackIcon.svg";