10-16 styled-components 를 쓰면서 css framework, 기술을 배운다는 것은. + react-router

Romuru·2022년 10월 16일
1

TIL

목록 보기
10/10

react-study

요즘 리액트 스터디를 진행 하면서 아주 기초적인 부분을 다시 공부하고 있지만

햇갈리는 부분도 있고 state의 관리, useState,useEffect 등 훅의 정확한 사용법과 작동방식,
props의 자세한 사용과 활용법 등 사용법만 익히고 있는 기술들을 자세히 파고 내려가면 엄청 깊은 내용이 있는걸 세삼 깨달았다.

styled-components

styled-components는 사용 방법만 익힌 수준이 였는데. "컴퍼넌트 단위로 스타일링을 한다." 라는 처음에 이 개념을 이해했을 때는 comonent의 의존성을 정말 각잡고 의존을 시켜버리면 이렇게 멋진 기술이 탄생할수 있다는걸 깨달았다. 그래서 모든 기술을 통틀어서 (심지어 리액트보다도) 신박해서 호감이었는데, components를 호출해서 수정하는 방식을 요즘 공부하고 있다.

const ComentsStyling = styled(ComentsComponents)

위와 같이 이미 만들어져 있는 별도의 컴포넌트를 호출해서 새로운 styled-component의 컴포넌트로 만들어서 css를 입히는 방법인데, 저 컴포넌트 안에 3개의 별도의 다른 component들을 호출하여 렌더링 하는 방식이면 component의 크기나 배치만 css를 적용 시킬수 있어, 앞으로 css도 고려한 component 분할도 고려 해야겠다는 생각이 들었다.

react-rotuer

이번 react-study는 크게 3주차로 구성 되어있는데,

각각 다른 프로젝트로 만들어서 분리 시키려고 하다가, 내부적인 폴더 구조를 통해 분할을 시키고 크게 WeekOne, WeekTwo, WeekThree 페이지(component)로 나눠서 버튼에 따라 주차별 과제를 렌더링 하려고했다. 처음에는 단순히 지금 페이지 번호를 state에 담아 if문, 혹은 삼항연산자로 페이징을 하려고 했는데, 3개 이상 페이징이 되면 삼항연산자는 거의 못쓸꺼 같구 다른 방법을 찾아야 했다.
처음에는 react-router 같이 외부의 라이브러리를 사용하지 않고 해결 하려고 했는데
Next.js의 편리한 페이징 기능에 맛들려서 react-rotuer도 다시 써볼겸 프로젝트에 다시 추가했다.

근데... 버전 업데이트가 되면서 라우팅을 하는 방법이 크게 달라져서 지금 문서를 읽으며 시도 해보고 있다. 블로그 글을 마지막으로 작성 한지 오래되었고 간만에 생각정리도 할겸 주저리 주저리 해봤다.

profile
늘 새로운 호기심을 찾고, 기술적 한계에 도전하고, 하늘색이 잘 어울리는 사람입니다.

0개의 댓글