TIL 210930

오늘 한 일

리액트 학습

컴포넌트 쪼개기

• 너무 작지도, 크지도 않게 적당하게 쪼개는 것이 유지, 보수하기에 좋다

• 공통되는 부분을 한 컴포넌트로 모아주기

프로젝트 폴더 구조

• elements : 최소단위 컴포넌트 (Text, Button, Input, Image, Grid...)

• components : elements 컴포넌트 조합 (Post, Header)

• pages: components 컴포넌트 조합 / 페이지 시작(Postlist, Login, Signup)

• redux : redux 모듈, 스토어

• shared : 공용으로 사용하는 코드 (App.js, App.css, firebase,js...)

.defaultProps

• 페이지 구성하는데 반드시 필요한 props 들을 모아두는 곳
• 넣어두면 props가 없어서 오류가 생기는 일을 방지 할 수 있음

Grid.defaultProps = {
  children: null,
  is_flex: false,
  width: "100%",
  padding: false,
  margin: false,
  bg: false,
};

// styled-components 적용
const GridBox = styled.div`
  width: ${(props) => props.width};
  height: 100%;
  box-sizing: border-box;

  /* 해당 값이 있으면 불러오고 없으면 패스 */
  ${(props) => (props.padding ? `padding:${props.padding};` : '')}
  ${(props) => (props.margin ? `margin:${props.margin};` : '')}
  ${(props) => (props.bg ? `background-color:${props.bg};` : '')}
    
  // 여러가지 속성을 묶어서 설정
  ${(props) =>
    props.is_flex
      ? `display: flex; align-items: center; justify-content: space-between;`
      : ""}
`;

느낀 점

프로젝트를 작업하는 새로운 방식에 아직 적응하지 못했지만 확실히 재활용을 함에 있어서 좋은 것 같다. 물론 아직 익숙해지지 않아서 여전히 어렵지만. 컴포넌트를 쪼개는 연습을 많이 해보고 어떻게 하는게 가장 나에게 잘 맞고 효율적인지 찾아봐야겠다. 갈길이 멀다

내일 할 일

• 리액트 학습