2022.06.05

1. styled-components props 전달하기

import React from 'react';
import styled from 'styled-components';
import { FaRegBell } from 'react-icons/fa';
import PropTypes from 'prop-types';

const ScheduleListItem = ({ scheduleData }) => {
  const { title, reservationTime, color } = scheduleData;
  return (
    <Container>
      <TitleContainer>
        <Title color={color}>{title}</Title>
      </TitleContainer>
      <ReservationTimeContainer>
        <IconBell>
          <FaRegBell />
        </IconBell>
        <ReservationTime>{reservationTime}</ReservationTime>
      </ReservationTimeContainer>
    </Container>
  );
};

이번에 styled-components에서 색상값을 props로 전달해서 처음 사용해보았다.

(위에 코드에서 color props가 이에 해당한다. )

const Title = styled.h2`
  font-weight: 700;
  font-size: 13px;
  ::before {
    display: inline-block;
    content: '';
    width: 3px;
    height: 20px;
    background-color: ${props => props.color};
    margin-right: 4px;
    transform: translate(0%, 20%);
  }
`;

 

 

현재 props값을 전달받아서 background-color에 적용한 사례이다.

조금 궁금했던 점은 

${props}로도 적용이 되던데 무슨 차이가 있는지 궁금하다. 또한 하단이랑 어떤 차이가 있는지 궁금했다.

 

 

${props =>
  props.inverted &&
  css`
    background-color:none;
    border: 2px solid white;
    color: white;
    &:hover{
      background: white;
      color: black;
    }
  `
}

 

 

 

2. VSC 폴더 구조 바꾸는 법 

assets 폴더안에 images 폴더를 넣고 그안에 png 파일을 넣고 싶었는데 위 이미지와 같이 뭔가 계속 폴더 하위 구조 형태로 나오지 않아서 짜증났다. 그래서 이를 변경해주려고 한다.

 

2-1. 우선 VSC내에서 톱니바퀴모양에서 설정탭에 들어간다. 

 

 

2-2. 검색창에 explorer.compactFolders를 입력한 이후, 만약에 체크표시가 되어있다면 해제 시켜준다!

 

체크해제 이후에 아래와 같이 잘 폴더 구조가 나누어진 형태로 보여지는 것을 확인할 수 있다. 

 

 

 

3. 리액트 프로젝트에서 assets폴더는 public이 아닌 src 폴더내에 위치해야 한다.

 

내가 Next.js를 쓸 때랑 조금 헷갈렸나보다. 

public 폴더에 assets를 넣어버리는 경우에는 import 할 수 없다고 에러가 뜬다 :(

그래서 리액트 폴더 구조에 대해서 다시 한 번 공부하게 되었다.

public 폴더에 접근하기 위해서는 process.env.PUBLIC_URL을 사용해야 한다고 한다. 

자세한 내용은 하단의 링크를 참고 바란다. 

https://create-react-app.dev/docs/using-the-public-folder/

Using the Public Folder | Create React App

 

아래의 블로그가 많은 도움이 되었다. 

https://velog.io/@raverana96/react-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94%EA%B5%AC%EC%A1%B0

[react] 리액트 프로젝트의 폴더구조

 

 

 

4. 리액트에서 SVG 파일 사용법 

 

피그마에서 png파일을 export 해서 쓰려고 했는데, 뭔가 이미지 불투명해 보여서 사용할 수 없었다. (파일이 깨지는 느낌이였다.)

그래서 이번엔 svg파일을 리액트에서 사용하는 법에 대해서 알아보게 되었다.

이번에는 svg를 리액트 컴포넌트로 사용하는 방법으로 시도해보았다.

(이 방법을 사용하면, 하나의 svg 파일로 다양한 크기, 색상을 가진 아이콘을 이용할 수 있다고 한다.)

 

 

1. 자신이 사용할 svg파일 안으로 들어가서 자신이 변경하고 싶은 값을 'current'로 바꾸어준다.

 

2. {ReactComponent as 이름} 과 같은 형태로 컴포넌트를 임포트하고 자신의 입맞에 맞게 current로 바꿔준 값을 바꾸면서 사용하면

된다.

 

'current'로 값을 바꿔준 property는, 사용하는 컴포넌트에서 다음과 같이 props 로 사용자가 원하는 대로 custom 할 수 있다.

 

아래의 블로그에 png, svg 차이와 리액트에서 svg를 어떻게 사용하는지 잘 설명이 되어있다.

https://velog.io/@juno7803/React-React%EC%97%90%EC%84%9C-SVG-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

[React] React에서 SVG 활용하기