# styled components
코드 깔끔하게 작성하기 (리액트, Styled-Components)
자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다. 하물며, 다른 사람이 내 코드를 보는 것은 어떨까? 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다.
'As' and Attrs
버튼을 하나 만들어 보았습니다 근데 어떤 이유로 button HTML 태그를 사용하고 싶지 않다면 어떻게 해야 할까 예를 들어 href으로 사용하고 싶다는 경우라면 Login 를 사용하게 되면 사진에 보이는 것 처럼 태그 형태가 바뀐 것을 볼 수 있다.예를 들어 굉장히
확작성 사용하기(2)
props로 전달하여 배경색을 변경해 보았니다. 이제는 Box라는 컴포넌트 안에 있는 속성 전부를 받아온 원 모양 디자인을 하고 싶다면 어떻게 해야 할까 알보겠습니다.변수로 할당 된 Box를 styled(Box)로 넣어주면 Box 컴포넌트 안에 있는 속성 까지 전부 쓸
확장성 사용하기
앞서 기본적으로 적용한 BoxOne과 BoxTwo 코드를 보면 background-color 색을 제외하고는 같은 코드이다 여기서 드는 생각은 반복되는 코드를 사용하고 싶지 않을수 있다.props를 사용하는 문법도 쉽게 적용이 가능합니다. boxColor라는 값을 임의
기본적인 설정 방법
기존에 우리가 알고 있는 기본 정익 방식 중 하나이다. 불편하다고 하기에는 자주 사용하는 방식이다보니 싫다 좋다의 개념은 아니었다. 기본적인 적용 방법은 위에 코드와 같다 직관적으로 훨씬 더 깔끔하고 스타일을 적용하는 부분과 분리 되있다 보니 직관적으로도 보기 편하다.
Redux를 이용한 React 다크 모드 기능 (with. styled-components)
styled-components를 사용하면서, createGlobalStyle를 사용하게 되었는데, 문득 이를 사용하면 손쉽게 다크 모드를 설정할 수 있지 않을까 하는 생각이 들어서 직접 다크 모드를 구현해 보았다.
[styled-components] | keyframe - animation 효과 구현
styled-components에서 제공하는 keyframes 키워드 사용원하는 애니메이션 효과를 변수로 정의하여 모듈화하고, 이를 animations 속성에 값으로 삽입하여 효과 구현transition 속성과 다르게 이벤트 없이 상시 효과가 발현될 수 있도록 구현가능
[styled-components] | CSS에 변화 주는 방법 (CSS transform)
상황에 따라 CSS를 변경하는 방법에는 2가지가 존재한다.컴포넌트 props를 통해 특성 값을 주는 방식상황 별 스타일 컴포넌트를 만들고, 조건부 렌더링을 구현하는 방식첫 번째, 상황에 따라 스타일 컴포넌트에 props를 통해 CSS 특성을 변경하는 방법에 대해 알아보
2차 프로젝트
to do 레이아웃 만들기 컴포넌트화 하기 한페이지 안에 styled-components 적용하기 기능 구현 craousel, category별 필터링, 더보기에서 전체보기 인기순 페이지 구현(랜덤 or 예약순)
스타일 간섭을 방지하기 위한 styled components와 css module
컴포넌트 파일에 css 파일을 import하여 사용하는 기존의 일반적인 스타일링 방식은 스타일의 스코프가 해당 컴포넌트에만 국한되지 않는다. 큰 프로젝트에서 수많은 개발자들이 같은 코드에서 작업하고 있을 때, 동일한 css 선택자가 다른 의도임에도 중복해서 사용될 수도
✍️ Next.js + styled-components + redux + redux-saga 기본 세팅
Next.js + styled-components + redux + redux-saga
styled-components
들어가기insta-reactJS에서 design에 사용할 styled-components를 간략하게 알아보고,복습해 보는 POSTstyled-components를 사용하는데 있어서 모든 page에 적용 혹은 사용할 수 있게함.styles.jsApp.js