📚요약
지난 시간 새로운 프로젝트를 시작했습니다. 이번 시간에는 기본적인 레이아웃과 테마를 적용해 보겠습니다.
📖프로젝트 BookStore-FE
📄페이지 레이아웃
레이아웃은 배치라는 뜻으로 페이지의 한정된 공간에 구성요소들을 효과적으로 배열하는 일입니다. 리액트로 비교하면 하나의 화면에 적절한 컴포넌트를 배치하기 위한 틀이라고 생각할 수 있습니다.
📑children props
컴포넌트에서 데이터를 내려받기 위해서 사용되는 prop에는 children이라는 변수로 태그 내부의 태그들을 받아서 사용할 수 있는 기능이 있습니다. 이를 활용해 공통된 것들을 하나의 레이아웃에 넣고 메인에 children을 통해 태그들을 넣을 수 있습니다. 이를 통해 하나의 컴포넌트에 중복된 코드들을 줄일 수 있습니다.
📄global style
프로젝트 전체에 일관된 스타일을 적용하기 위한 방법으로 브라우저마다 user agent stylesheet로 인해 생기는 스타일의 차이를 극복하기 하기 위해서 사용됩니다.
- 에릭마이어의 reset css : 모든 스타일을 전부 0으로 적용한다. 예를 들어 h1, h2와 같이 차이를 구분해 놓은 태그조차 0으로 적용한다.
- normalize.css : reset css와 달리 기존 태그들의 특징은 살려두고, 브라우저 간의 차이를 극복해 준다.
- sanitize.css : normalize css와 비슷하지만 발전된 버전이다.
📄CSS in JS
말 그대로 CSS를 자바스크립트 코드에서 사용하는 것을 말합니다. 이와 다른 방식으로는 CSS in CSS로 전처리기를 사용하는 방법이 있습니다.
📑css in js의 필요성
- 스타일의 전역 충돌
- 의존성 관리의 어려움
- 불필요한(중복된) 코드가 발생할 수 있다
- 압축에 유리하다
- 컴포넌트와 스타일의 상태 공유에 어려움이 발생한다
- 렌더링에 따라 순서와 명시도가 생각하는 것과 달라질 수 있다
- 캡슐화
📄styled components
css in js 중 하나인 styled components는 react 컴포넌트에 스타일을 적용할 수 있는 편리한 방법을 제공합니다. 자세한 내용은 공식 사이트에서 확인할 수 있습니다.
styled-components: Basics
Get Started with styled-components basics.
styled-components.com
🍯tip! VSCode에서 styled components를 사용하기 전에 vscode-styled-components extension을 설치하고 사용하면 더 편리하게 사용할 수 있다.
📑테마(theme)
styled components에서 제공하는 ThemeProvider 컴포넌트를 통해 테마를 지정해서 사용할 수 있습니다.
테마를 사용하는 이유
- 프로젝트마다 다른 UI, UX의 일관성
- 유지보수의 용이성
- 확장성
- 재사용성
- 다크 모드와 비슷하게 사용자가 원하는 색상을 사용하는 사용자 정의
📄Context API
리액트에서 제공하는 context api를 활용하면 props를 하나하나 내려주는 방식이 아닌 컴포넌트 전체에서 사용할 수 있습니다. 쉽게 얘기하면 전역으로 데이터를 관리할 수 있다는 말입니다. 이를 테마에 활용해 구현을 진행해 봤습니다.
cotext api에 대한 자세한 내용은 공식 사이트에서 확인할 수 있습니다.
Context – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
자세한 코드는 github에서 확인할 수 있습니다.
ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool
프로그래머스 데브코스에서 학습하는 것들을 모아두는 레포. Contribute to nulzi/ProgrammersSchool development by creating an account on GitHub.
github.com
❔▪❓
Q. Context API와 Redux는 같은 기능을 하는 것 같은데 무슨 차이가 있을까?
A. Redux vs Context API - Tanya sharma, Context API vs Redux - 고석진
다음 시간에 계속...
출처 & 참고
문윤기 강사님의 강의
Let There Be Peace on CSS, didoo, 2024.07.16
웹 컴포넌트 스타일링 관리 : CSS-in-JS vs CSS-in-CSS, 우창균, 2024.07.16
'개발 > 프로그래머스 데브코스' 카테고리의 다른 글
| 데브코스 스터디(알고리즘, 코테) 22회차 (0) | 2024.07.18 |
|---|---|
| 프로그래머스 데브코스 73일차 with. TS 웹 풀스택 (0) | 2024.07.17 |
| 데브코스 스터디(알고리즘, 코테) 21회차 (0) | 2024.07.15 |
| 프로그래머스 데브코스 71일차 with. TS 웹 풀스택 (0) | 2024.07.15 |
| 프로그래머스 데브코스 66~70일차(방학) (0) | 2024.07.15 |
