먼저 배경을 만들어보자 이제 npx create-react-app 같은 기본적인건
안말할거임 !
먼저 styled-components에서 createGlobalStyle 를 import해주고
모든 화면에 공통적으로 써줄 스타일인 GlobalStyle이라는 컴포넌트를 만드는데 여기에는 아까 import한 createGlobalStyle을 그대로 넣어주고 css적듯이 넣어주면 된다 !
이러면 이제 웹앱이 보여질 배경색은 깔렸다
그러고 이제 새로운 컴포넌트를 또 만들어보자
여기에는 이제 todoList만 보여질 메인화면(테이블) 같은 틀을 만들거다
먼저 styled-components를 통해 styled를 import해주고 시작하자
TodoTemplateBlock 라는 스타일 컴포넌트를 만들어주고
TodoTemplate컴포넌트에는 children props를 가져와서
TodoTemplateBlock사이에 children을 넣어서 렌더링 해주면 끝난다 !
이제 TodoTemplates 컴포넌트를 app.js로 불러와서 사용해보자
성능테스트를 위해 아무 텍스트나 넣고 TodoTemplate 컴포넌트로 감싸준다음 실행시켜보자
빼앰! 기본 틀 완성 !
이제 헤더부분을 만들어주어야하니
헤더 컴포넌트를 따로 만들어주자
TodoHeadBlock 라는 styled components를 만들어주고
아래에 TodoHead라는 컴포넌트를 만들고 ! 그안에 위에 만들어놓은
styled components(TodoHeadBlock)를 활용하여
내가 원하는 부분에 쏙 ! 쏙 ! 박아주도록 하자
이제 헤드 부분은 끝 !
리스트를 만들어보도록 하자
다시 components 폴더에 TodoList.js 파일을 만들고 리스트 컴포넌트를 만들어보자
이번에는 이렇게 공백으로 채워진 나머지 영역을 다 리스트로 채워줄거다
먼저 저 공간이 어떻게 채워지는지 확인하기 위해 테스트를 해보자
배경을 회색으로 넣어주고 flex: 1 을 넣어주자
이전에 우리는
TodoTemplate에서 우리는 display: flex 선언을 했고 방향은 column으로 설정해주었기 때문에
TodoListBlock에 flex : 1 을 주게되면
자신이 차지할수있는 영역 전체를 차지하게 된다
이거는 우리가 나중에 항목이 많아지면 자동으로 스크롤을 이용해 보여주기위해 넣어놓았다
이제 컴포넌트에 만들어놓은 styled-components를 넣어주고, 다시 app.js로 가자
우리가 넣을 부분은 아까 만든 Head 아래 부분이니까, 그아래에 넣어주자
그러면 이렇게 눈으로 확인할수있게된다
이제 테스트는 끝났으니 gray 속성을 지우고 본격 작업을 해보자 !
