[React] ContextAPI를 사용해서 TodoList만들기(1) : styled-components

리액트를 다루는 기술에서는 투두리스트를 만드는 예제를 만들어봤었는데, 그 때와 다르게 이번에는 contextAPI를 이용해서 투두리스트를 만들어보았다.

아직 contextAPI에 대해서 누구에게 설명할 수 있을만큼 정리가 안되어있다는 생각이 들어서 다시 새로운 마음으로 공부를 해봤다.

그래서! 이번 포스트에서는 contextAPI에 대한 개념들에 대해서 설명하고, 투두리스트 코드를 보면서 다시 정리해볼 생각이다. contextAPI를 사용한 투두리스트 예제는 벨로퍼트님의 이 글을 참고해서 작성했습니다.

 

---

먼저 styled-components를 사용해서 투두리스트를 꾸며줬는데, 거기서 사용된 스타일링에서 내가 잘 몰랐던 부분들에 대해 적어보려고 한다.

 

• createGlobalStyle : 이 기능은 페이지 전체에 회색 배경색을 적용할 때 사용되었다.

const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

createGlobalStyle로 글로벌하게 적용될 스타일중 위의 코드는 body의 background의 색깔을 지정해주었다.

 

• overflow-y : auto;

const TodoListBlock = styled.div`
  flex: 1;
  padding: 20px 32px;
  padding-bottom: 48px;
  overflow-y: auto;
`;

y축 방향으로 길이가 넘쳤을 때, 자동으로 스크롤이 생기는 기능(즉, 내용이 넘칠때만 세로 스크롤을 제공해주는 것)

(참고자료)

 

• flex : 1;

flex : 1은 위의 코드와 같은 곳에서 쓰이고 있어서 따로 이에 대한 예시는 제공해놓지 않았다.

참고자료

flex는 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 조절하는 속성이다.

flex : 이곳에 쓰는 것들은 다 차례로 grow, shrink, basis를 뜻하는데 flex : 1은 숫자가 하나이고, 단위가 없으므로 flex-grow가 1이라는 뜻이다.

따라서, 정해진 틀의 크기에 맞게 flex에 해당하는 아이템의 크기가 비율 1에 맞게 커진다는 뜻인것같다.

 

• display : flex;

const TodoTemplateBlock = styled.div`
    width: 512px;
    height : 768px;

    position: relative;
    background: white;
    border-radius : 16px;
    box-shadow : 0 0 8px 0 rgba(0,0,0,0.04);

    margin: 0 auto;

    margin-top : 96px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
`;

(참고자료)

flexbox레이아웃을 구성할때 그 콘텐츠를 감싸는 부모요소인 컨테이너에 display : flex;를 지정해준다.

따라서 위와 같이 flex: 1;과 같은 flexbox를 꾸미기 위해서는 display: flex;를 부모요소에 넣어줘야한다.

 

 

• 버튼 45도 회전하면서 색 바꾸기

transition: 0.125s all ease-in;
  ${props =>
        props.open &&
        css`
      background: #ff6b6b;
      &:hover {
        background: #ff8787;
      }
      &:active {
        background: #fa5252;
      }
      transform: translate(-50%, 50%) rotate(45deg);
    `}

여기서 ${변수명}은 표현식삽입 EL(Expression Language)라고도 불리는데, 이 코드에서는 props를 받는데 과연 이 props는 어떤 props를 받는 것일까?

이는 받는 props에 따라서 다른 스타일을 제공하도록 만들어주는 styled-components의 가변스타일링이다.

자바스크립트의 && 연산자를 사용해서, open prop이 존재하는 경우에만 css로 정의된 스타일이 적용되도록 만든 코드이다.

그리고, transition과 transform을 통해서 애니메이션을 삽입하였다.

참고자료1 참고자료2

따라서, 버튼을 클릭하면 0.125초동안 45도 기울이는 애니메이션을 작동시키는 코드이다

 

• position : absolute;

position은 문서상에 요소를 배치하는 방법을 지정하는 속성이다.

여기에 position으로 놓을 수 있는 많은 요소들이 작성되어있으니 참고하길 바란다.

나는 일단 코드에 작성되어있는 absolute에 대해서만 다뤄볼 것이다.

absolute는 static의 속성을 지니고 있지 않은 부모를 기준으로 움직인다.

relative, absolute, fixed등의 다른 태그가 없다면 가장 위의 태그를 기준으로 삼는다.