1. 서론

단시간 아이돌봄 서비스 잠시맘의 mvp를 만들어 봤다. 서버는 아직 구현하지 못했고 React의 기능을 공부하면서 서비스를 만드는데 집중했다.
2022.09.05까지 구현하면서 배운 내용을 정리해본다.

잠시맘

2. 본론

1) import {}

컴포넌트나 모듈을 import 할 때, {}(중괄호)를 사용하는 경우와 사용하지 않는 경우가 있다. 이건 export의 차이인데 export default를 사용한 경우에는 {}가 없이 가능하다.

2) MUI (Material Design)

각 컴포넌트마다 필요한 라이브러리가 있다.
컴포넌트마다 API가 있어서 기능은 제공이 되지만 Custom한 CSS를 사용하려면 sx props를 사용하여 css를 적용하면 된다.

  sx={{
    boxShadow: 2,
    border: 2,
    borderColor: 'primary.light',
    '& .MuiDataGrid-cell:hover': {
      color: 'primary.main',
    },
  }}
  // 위와 같이 props를 사용하는 방법이 있고
  export const DatePicker = {
  width: '100%',
}
  // 아예 변수를 만들어서 사용하는 방법이 있다.

3) props 구조 분해

component에 props를 제공하는 방법은 props를 그대로 전달하는 방법과 구조 분해를 통해 전달하는 방법이 있다. 후자는 props에 default 값을 전달해줄 수가 있다.

const Button = ({ fullWidth = false, outline = false, onClick, children, ...props }) => {
  return (<button fullWidth={fullWidth}></button>)
}

위와 같이 구조분해를 사용하면 props 필요 없이 바로 값을 가져올 수 있다.

4) 2번째 요소에만 css속성 값을 전달해줄 수 있는 방법

두번째에만 margin을 적용하고 싶을 때(주로 list)

  & > button + button {
    margin-left: 1rem;
  }

부모 요소의 첫번 째 태그 (>)의 2번째 요소 (+)

5) onClick

참고 문서

함수에 전달하려는 파라미터 값이 있을경우 () => function으로 사용한다.

6) Component props 조건 별로 css적용하기

    <styles.Button
      fullWidth={fullWidth}
      outline={outline}
      onClick={onClick}
      {...props}
    >
      <span>{children}</span>
    </styles.Button>

const noLine = css`
  background-color: ${Common.colors.primary};

  &:hover {
    background-color: ${Common.colors.primary_darker};
  }
`

export const Button = styled.button`
  ${({ outline }) =>
    outline ? outLine : noLine} // props로 들어와서 {}로 감싸야한다.
  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
  height: ${({fullWidth}) => (fullWidth? '3.2rem': 'auto')};
`

또한 custom option을 직접 주고 싶다면

heightValue: 4rem;

height: ${({heightValue}) => heightValue}

위와 같이 설정해주면 된다.

7) Global Style 적용방법

색깔을 전체 프로젝트에서 통일성 있게 사용하고 싶었다. 여러가지 방법이 있지만 assets폴더에 styles 폴더의 Common.js파일을 만들어서 모듈을 가져오는 방법으로 사용했다.

Common.js

export const Common = {
	colors: {
      primary: '#fcb25b',
      primary_light:'#ffe7da',
      primary_lighter: '#fff9f1',
      primary_dark:'#ffd29D',
      primary_darker: '#E6A153',
    }
}

사용할 때에는 다음과 같이 사용하면 된다.

import { Common } from '../../assets/styles/common'


background-color: ${Common.colors.primary_light};

8) git 대소문자 구분

Git에서 기본으로 폴더나 파일에서 대소문자 구별을 무시한다. 그래서 파일명이나 폴더 명을 소문자에서 대문자로 바꿀 때나 그 반대일 경우 오류가 발생한다. 해결방법은

git config core.ignorecase false

위 옵션을 설정하면 된다.

9) className 조건부 랜더링

<tools.CheckIcon className={'inline-block ' + (state ? 'active' : '')} />

위오 같이 사용하면 active는 조건에 따라서 달라지고 inline-block은 별도로 적용된다. inline-block뒤에 한칸을 띄워 놨다.