1.1 React masterClass

만족스럽지는 못하지만 책에있는 모든 기능구현을 끝내고 오늘부터 React JS 공부를 다시 시작했다. 첫 챕터부터 매우 만족스러웠다 팀플할때 애먹었던 부분중 하나가 styled-component를 사용하여 CSS를 할 때 였는데 이번 챕터에서 가려운 부분을 많이 긁어주었다.
이제 styled-component를 이용해서 속성값변경 자식선택해서꾸미기, 애니매이션, 다크모드 등 많은 기능들을 사용할 수 있을 것같다. 벌써 할 수 있는것들이 눈에 훤하다!!! 신나는구만ㅎㅎ

오늘 배운 styled-component를 정리해보자면

1. 상속
   이거는 팀플 할 때도 자주 사용한 방법인데 비슷한 스타일 값들의 컴포넌트는 중복해서 사용하지않고 상속 받은뒤 필요한 값만 추가/변경해주는 것이다 (class상속같은 개념이다)
   코드로 예시를 들자면

const Box = styled.div`
  background-color: ${(prop) => prop.color};
  width: 100px;
  height: 100px;
`;

 //상속
const Circle = styled(Box)`
  border-radius: 50px;
`;

이와같은 방식으로 상속해서 사용하여 코드량을 줄일 수 있다.

2. styled-component에서 속성값 설정하기
   이번에 배우면서 알게된 값인데 만약 같은 컴포넌트에 모두 들어가는 값이라면 태그내에서 속성값을 설정해줄 수 도 있지만 styled-component에서도 속성값을 설정해줄 수 있다 이번에 처음 알게되었는데 종종 사용할 것 같다!

const Input = styled.input.attrs({ required: true, minLength: 10 })`
  margin: 10px;
  background-color: transparent;
`;

이와같이 사용할 수 있는데 이렇게 한다면 Input이라는 컴포넌트를 사용할때 required , minLength : 10이 자동으로 속성값에 들어가서 사용할 수 있다.

3. 애니메이션
   이것은 원래 알고 있었지만 팀플할때 적용이 안될 때가 있어서 애를 먹었다 아마도 렌더링과 관련된 문제 때문인것 같은데 이번에 애니메이션을 확실히 정리했으니 생명주기쪽도 공부하고 팀플코드를 다시 리팩토링해봐야겠다.
   추가로 알게된점은 styled-component도 component여서 export하여 다른 곳에서 사용할 수 있다는 점이다 이러면 다른 코드에서 다시 애니메이션을 생성하지않고 import해서 사용할 수 있겠다!

import styled, { keyframes } from "styled-components";

export const rotationAnimation = keyframes`
0%{
  transform: rotateY(0deg);
  background-color: #ffecd2;
}
50%{
  transform: rotateY(180deg);
  background-color: #fcb69f;
}
100%{
  transform: rotateY(0deg);
  background-color: #ffecd2;
}
`;

const Animation = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  background-color: #ff7eb3;
  border-radius: 50px;
  animation: ${rotationAnimation} 10s linear infinite;
  `;

4. scss와같은 nesting기능
   HTML 태그선택은 팀플 중반부터 많이 사용했지만 styled-component는 어색하고 잘 몰라서 자주 사용하지 않았다. 하지만 별반 다른게 없다는 것을 이번 기회에 정리하게 되었고 앞으로 자주 사용할 것 같다.

const Emoji = styled.span`
  &:active {
    opacity: 0;
  }
`;

// 위의 animation component
const Animation = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  background-color: #ff7eb3;
  border-radius: 50px;
  animation: ${rotationAnimation} 10s linear infinite;
  span {
    font-size: 5px;
    &:hover {
      font-size: 30px;
    }
  }
  ${Emoji} {
    &:active {
      opacity: 0;
    }
  }
`;

// 사용코드
        <Animation>
          <span>😎</span>
        </Animation>
        <Animation>
          <p>😎</p>
        </Animation>
        <Animation>
          <Emoji>😎</Emoji>
        </Animation>

이렇게되면 중간의 P는 적용이 안되고 첫번째 세번째만 적용된다.

5. Theme 사용하기
   마지막으로 다크모드 같은 전체 변경을 위해서 사용하는 styled-component 방법으로 theme을 사용하는 것이다.
   내가 사용할 컴포넌트들의 부모에 theme을 적용해주고 컴포넌트에서 이 theme의 값을 props로 받아와 사용한다면 부모쪽에서 이벤트리스너로 theme을 변경해주면 모든 자식 component에서 코드 수정없이 같이 변경되는 방식이다.

// 부모 
import { ThemeProvider } from "styled-components";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

// 사용코드
    <ThemeProvider theme={darkTheme}>
      <StyledCompnentPractice />
    </ThemeProvider>

// 자식

const Background = styled.div`
  background-color: ${(prop) => prop.theme.backgroundColor};
`;

// 사용코드
    <Background>
      <Father>
        <Box color="teal"></Box>
        <Circle color="tomato"></Circle>
      </Father>
    </Background>

이렇게 부모쪽에서 theme을 설정해주고(theme compnent에는 theme속성값이 반드시 들어가있어야한다) 자식component에서 props.theme으로 받아서 설정해주면 자식쪽 코드를 건드리지않고 자동 변경되게된다.

이렇게 styled-component를 한 번 총 정리하게 되었다. 아직 몇가지 빠진것들이 있지만 앞으로 차츰차츰 배워가며 보충하고 오늘 배운것 만으로도 코드 수정할게 여러개 생각난다ㅎㅎ,,,

ps.
오늘은 친구들과 저녁에 약속이 있어서 공부를 많이 하지 못했다. 어제 클론코딩이 끝나기도 했고...
남은시간동안은 코드잇 실습문제들을 풀다가 내일부터 다시 빡시게 공부를 시작해야겠다.
오랜만에 친구들 만나니깐 즐거웠다!
다시 열코, 열공 해야지 ㅎㅇㅌ!