[메인프로젝트] React + Styled-component로 반응형 페이지 만들기

배경

프리 프로젝트 때는 '일단 스스로 사용 방법을 익히고 본다'는 심정으로 styled-component를 이렇게 저렇게 만지고 고민해가면서 사용방법을 익혔다.

그런데 아무래도 이걸 사용하는 best practice를 모르다 보니 긴가민가 하면서 헤메는 데 시간이 많이 들었다. 예를 들면 styled component를 각 레벨별로 따로 만들어야 하는지, 아니면 하나의 컴포넌트 안에서 내부 element를 class로 선택해야 하는지 몰라 갈팡질팡했다.

그래서 이번 main project에 들어서면서는 아예 처음부터 best practice를 따라하며 사용법을 배우고, 여기에서 우리에게 필요한 부분만 따 오고 싶었다.

 

튜토리얼

기준은 이 영상으로 잡았다.

https://www.youtube.com/watch?v=53i9EHsJGxw 

깃헙 주소는 https://github.com/itSatoriCode/react-data-website

영상을 통해 새로 배운 것

폴더/파일 구조 분리

1. 스타일 : UI컴포넌트별로 파일을 나누지 않고, 사용되는 페이지별로 나눈다.

   ex) GlobalStyle에 모든 컴포넌트의 기본 스타일을 지정하고, 페이지별로 style.js 파일을 따로 만든 뒤 GlobalStyle을 상속해서 페이지에 맞게 변형한다. NavBar에서 사용할 button, div, video, heading 등등은 NavBarStyle.js에서 import한다.

 

2. 기능 : Components 폴더에 각 컴포넌트용 폴더를 따로 만들되, 이는 view를 구성하기 위한 파일일 뿐 그 안에 들어가는 데이터들은 Data 폴더 안에 따로 만든다.

   ex) Components/NavBar.js 에서 사용할 데이터는 Data/NavBarData.js 에서 import한다.

 

GlobalStyle에서의 컴포넌트 세팅

필요할 때마다  GlobalStyled에 세팅한 컴포넌트들을 상속(?)해서 새 컴포넌트를 만들어 쓰기도 한다.

그런데 마치 html에서 inline으로 css를 주는 것처럼 props로 바로 쓸 수 있도록, Global 컴포넌트 안에 거의 모든 스타일 요소들을 미리 세팅해 놨다.

처음에는 공간 낭비인 것 같아서 따라 쓰기 좀 꺼려졌는데, 이렇게 해 둠으로써 추후에 추가로 컴포넌트를 만들지 않아도 된다면 오히려 좋을 것 같기도 하다. 우리 프로젝트에 맞춰서 변경하지 않을 부분은 삭제하고 자주 변경할 부분은 추가해도 되겠다.

export const TextWrapper = styled.span`
	color: ${({ color }) => (color ? color : '')};
	font-size: ${({ size }) => (size ? size : '')};
	font-weight: ${({ weight }) => (weight ? weight : '')};
	letter-spacing: ${({ spacing }) => (spacing ? spacing : '')};
	padding: ${({ padding }) => (padding ? padding : '')};
	margin: ${({ margin }) => (margin ? margin : '')};
	margin-bottom: ${({ mb }) => (mb ? mb : '')};
	margin-top: ${({ mt }) => (mt ? mt : '')};
`;

 

칼럼 그리드 시스템 제작

영상을 보다 보니 container > row > col 시스템이 있기는 하지만 내가 원하는 칼럼 그리드 시스템이 아니었다. 나는 칼럼 수에 따라 정해진 width값 사용을 원하는 것이어서, styled-component에서 칼럼 그리드 사용하는 방식을 다시 검색해 봤다.

 

1. '칼럼 그리드'라기보다는 '플렉스 그로우 그리드' 라고 불러야 할 거 같은 단순한 방식을 하나 찾았다. 이 방식을 쓰면 각 row에 들어가는 컴포넌트들의 비율을 수동으로 맞춰줘야 한다. 원하는 게 아니니 탈락. 

 

2. 라이브러리도 있었는데, 다운로드 수가 너무 적어서 배우는 데 시간 쓰는 게 아까울 느낌이었다. 필요한 코드만 뜯어서 갖다 써볼까 했더니 필요 이상으로 복잡했다.

https://github.com/roylee0704/react-flexbox-grid

 

3. 그래서 그냥 직접 만들기로 했다...

예전에 scss 강의 보면서 배운 코드를 뜯어다가 계산 필요한 변수는 js 변수로 변경해 처리하고, styled-component에서 &{변수}로 가져다 썼다. 그리고 이걸 강의에 나온 코드에 갖다 합쳤다.

(Theme provider에 변수를 넣었을 수도 있었지만, props를 갖다 쓰는 식이 길어서 가독성이 너무 떨어졌다ㅠ)

 

scss에서는 class를 부여해서 (.container .row .col-sm-4) 너비를 조정했다면, 보통 styled-component에서는 div로 만들어서 (<Container> <Row> <Col>) 사용하는 것 같길래 따라했다. 모든 게 꼭 div일 필요는 없을 것이라는 생각에 찝찝했지만 경우의 수를 다 따지려면 위의 라이브러리처럼 복잡해질 테니 그냥 뒀다.

 

Col 에서 props로 lg 값과 sm 값을 받는다. 각각 데스크탑에서 차지할 칼럼 수와 모바일에서 차지할 칼럼 수다.

기존에 배웠던 내용에서는 unit 너비나 글씨 크기 등이 대부분 px로 고정되어 있었는데, 필요하다면 %나 em으로 바꿔야겠다.

너무 현란해서 눈이 아프다

문법과 기능

알면 진짜 시간 절약되는 VS Code React snippet 리스트

반응형 웹을 구현하는 clamp() 함수 사용 기초

 

기타 검색한 것

* Styled-components에서 css 변수 사용하는 법 

sass를 설치하지 않고도 sass 문법을 사용할 수 있다길래 $로 변수 설정을 시도했는데 불가능했다.

이 포스팅을 보니 sass의 모든 문법을 쓸 수 있는 것은 아닌 것 같다.

그래서 찾은 방법은 (1) '--변수명'으로 변수를 설정하고 var(변수명)으로 사용하는 방식, (2) Theme provider를 사용하는 방식이었다.

 

* text-overflow

https://webisfree.com/2015-08-17/[css]-text-overflow-텍스트가-많은-경우-생략기호로-보여주기