step1. Main

 

 

오늘의 결과물 ✨

1. create-react-app 설치

yarn create react-app 30days-challenge

 

2. styled-components

react에서 컴포넌트에 CSS를 적용시키는 방법은 다양했다.

보통은 html, css, js 파일을 분리해서 작성하지만 react CSS-in-JS 관련 라이브러리인 styled-components를 사용해보고 싶어서 블로그랑 노마드 코더 유튜브 강의 보고 대충 사용법을 익혔다.

보고 따라하면 이해가 되는 듯 싶다가도 막상 직접 하려니깐 막막했다. 그래도 구글링 하고, 어제 본 코드 다시 보고 공식 문서도 보면서 하니깐 왜 쓰는지 정도는 조금 알거 같은..?

결국은 보여지는게 중요하니깐 css관리하는게 중요한데, 하나의 컴포넌트 파일안에 같이 관리할 수 있어서 보기도 좋고 props 같은거 활용해서 재사용도 가능하고 여러모로 편리한 거 같다. 

yarn add styled-components

2-1. styled-reset

• CSS 초기화

yarn add styled-reset

2-2. global-style.js

• 전역으로 관리할 CSS

  import { createGlobalStyle } from 'styled-components';
  import reset from 'styled-reset';
  
  const GlobalStyle = createGlobalStyle`
    ${reset}
    // Globalstyle 설정
      body{
        background-color: #e8f1e9;
        font-family: 'Montserrat', sans-serif;
      }
  `
  
  export default GlobalStyle;

2-3. theme.js

• 공통으로 관리할 CSS
• color 테마 바꿀 때 유용하게 사용할 듯. 아직 사용방법이 미숙하다. 
• css root에 변수로 지정해서 하는 방법이랑 유사한거 같다.
• ThemeProvider 하위에 있는 컴포넌트에서 사용할 수 있다. 

export const theme = {
  colors : {
    mainColor: '#447d53',
    subColor: '#d4e2d4',
    darkGrayColor: '#333',
    grayColor: '#999',
 }
  

import styled, { ThemeProvider } from 'styled-components';

class Template extends Component {
	
  const Component = styled.div`
  color: ${({ theme }) => theme.colors.mainColor};
`
   render () {
      return (
         <>
            <ThemeProvider theme={theme}>
               //Component
            </ThemeProvider>
         </>
      )
   }
}

 

 

3. Template

• 나는 일단 리액트 초보이기 때문에 큰 컴포넌트에서 작은 컴포넌트로 쪼갤 예정이라서 일단 한꺼번에 작성했다. 
• AddButton을 클릭하면 Form을 입력할 수 있는 Modal창이 나타나게끔 구현할 예정. 

class Template extends Component {

   render () {
      return (
         <>
            <ThemeProvider theme={theme}>
               <Header>You will never change your life until you change something you do daily.</Header>
               <Container>
                  <Title>30days</Title>
                  <Board>
                     <AddMessage>                  
                        <AddButton/>
                           There are no challenge yet.<br /> Click + button to add your first challenge.
                     </AddMessage>
                  </Board>
               </Container>
            </ThemeProvider>
         </>
      )
   }
}

 

3-1 Styled-icons

• styled-components의 icon 라이브러리. 
• react icon 그냥 써도 되는데 쓰는김에 통일 시키는게 나을거 같았다. 
• 여기서 약간 삽질했다. 설치를 해도 pagkage.json에 안나타나길래 import도 안되고 자꾸 오류나서 styled-icons/material 만 따로 설치하니깐 됐다.... 어차피 한 종류만 쓰는게 통일감 있을거 같아서 결과적으론 더 나은거같다. 
• svg라서 color 바꿀땐 fill로 바꿔줘야한다. 

import { AddCircleOutline } from '@styled-icons/material';

const AddButton = styled(AddCircleOutline)`
  display: block;
  fill: ${({ theme }) => theme.colors.subColor};
  width: 70px;
  margin: 0 auto 0.5rem;
  cursor: pointer;
  transition: 0.2s;
  &:hover {
    fill:  ${({ theme }) => theme.colors.mainColor};
  }
  
 class Template extends Component {

   render () {
      return (
         <>
          <AddButton/>
         </>
      )
   }
}

 

해야할 것 

◻️ addButton에 click이벤트 구현

◻️ modal 컴포넌트 구현

 

 

 

---

 

역시 100번 보는 것보다 한 번 직접 해보는게 큰 도움이 되는것 같다. 삽질도 여러번 할거 같다.

지금 약간 조립 설명서가 누락된 레고를 완성사진만 보면서 조립하는 느낌이 든다.

대신 커스터마이징이 가능하니깐 내 마음대로 만들 수 있어서 좋은듯

이제 그 다음은 Modal창 구현을 해야겠다. 한 번 해본 적은 있는데 다시 내 프로젝트에 적용시키면서 

정리해놓아야 겠다.