# styledcomponents

gaoridang

5월 스터디 총정리! > React, TypeScript, and Redux from 독학 styled-components from 노마드코더 5월 한 달 동안 doit 모던 리액트 타입스크립트 책을 보며 리덕스까지 공부했다. 최근* 노마드 코더* 리액트 스터디에 등록해서 styled-components를 배웠다. 앞서 배운 것과 이 두 가지를 모두 활용해서 Bucket List App을 만들기로 결정! ➡︎ 전체 코드는 여기에! 의식의 흐름 (순서) 1. 한 컴포넌트에 몰아넣기 TodoList.tsx 지금은 많이 바뀐 상태지만 처음 시작할 때는 폴더 구조를 어떻게 나눠야할지 몰랐다. 그래서 일단 위 컴포넌트에 너무 길다고 느끼기 전까지 모든 코드를 적었다. 스타일링 할 컴포넌트 - d

whwodlf90

요즘 한번씩 보는 에러이다. 위에서 보면 boolean 속성이 아닌 loading속성이 false를 받아서 에러가 나왔다는 것이다. 그런데, 나는 loading을 속성으로 지정해놨다. 여기서 나는 문제점을 파악하기 어려워서 구글링을 시도 했다. https://styled-components.com/docs/api#transient-props 위의 URL 주소를 찾을 수 있었다. 5.1버전부터 적용이 되는 듯 하다. > If you want to prevent props meant to be consumed by styled

stackin

as를 붙여서 원래 태그가 아닌 다른 태그로 사용할 수 있도록 할 수 있다. 컴포넌트의 모든 것을 똑같이 가져가는 대신 html의 태그명만 바꿔줄 수 있다. attrs를 붙여서 모든 Input 컴포넌트가 required: true값을 가지게 할 수 있다. html element에 해당되는 것을 모두 넣을 수 있음 props를 사용하여 각 컴포넌트를 configurable하게 만들 수 있다.

6792kjs

0. recoil이란? todo list를 만들기 전 recoil을 모르기 때문에 recoil을 먼저 검색해 보았습니다. 옆에 있는 친구에게 물어보니 자기도 atom과 selector의 차이를 모르겠다고 하더군요. 하지만, 전 atom과 selector도 모르는 상태였기 때문에 무슨말이지 싶었습니다. 결론 : 열공하자!! > recoil이 나오게 된 배경 기존 사용하는 react 자체에 내장된 상태 관리 기능들에는 한계가 있는데, 컴포넌트의 상태를 공통된 상위 요소까지 끌어올려야만 공유되며, 이 과정에서 거대 트리가 다시 렌더링된다. context는 단일 값만 저장할 수 있으며, 자체 소비자를 가지는 여러 값들의 집합을 담을 수는 없다. -> 1, 2로 인해 트리의 최상단인 state가 존재하는 곳 부터, 말단인 state가 사용되는 곳까지의 코드 분할을 어렵게 하게됩니다. > 위의 문제점을 개선하기 위한 r

tjrans9248

CSs in Js Css-in-Js는 자바스크립트 파일 안에서 css를 작성할 수 있는 방법입니다. Css-in-Js는 js파일 안에서 css 코드를 작성하기 때문에 css의 변수와 함수를 그대로 사용할 수 있습니다. 그리고 css 클래스면을 해시 값으로 자동으로 생성하여 클래스 이름 작명에 대한 고민의 수고가 덜합니다. 또한, 현대웹은 컴포넌트 기반으로 발전해 나가기 때문에 컴포넌트와 스타일을 하나의 파일에서 작성하는 Css-in-Js는 모듈화가 수월해집니다. 스타일드 컴포넌트의 특징 css.Sass에서는 별도의 css, sass 파일을 생성하며 js파일에 import해서 사용했지만, 스타일드 컴포넌트는 스타일링을 할 때 ES6의 Tagged Templeate Literal 문법을 이용하여 js파일 안에서 선언해서 사용할 수 있습니다. styled-components 를 사용하기 위해서 스타일드 컴포넌트의 styled를 import 해준다. </

hrim

react를 사용하면서 마주하게 된 고민 Styled Component와 Scss어느것이 도 효과적인가? 현재(아직 Styled Component를 프로젝트에 사용하기 전이고 앞으로의 2주간의 프로젝트에서 사용하기로 되어있음_ 후에 생각이 달라지면 계속 생각을 이어나갈 생각)의 생각은 > "팀의 대세를 따르자...! " 현재 느끼기에는 Styled Components는 vue에서 제공하는 "style scoped"와 비슷한 개념으로 느껴짐!(물론 작성방식이라든지 차이가 있음) 다만 scoped는 정말 그 컴포넌트만 적용되어서 css적용할 때 꽤 제한이 있어서 회사에서는 결국 css파일을 따로 빼서 관리했던 기억이 난다. (물론 더 좋은 방법이 있었을 수 있다..! vue를 다시 도입할 일 있으면 한번 이점에 대해 다시 알아보고 싶다.)그와는 다르게 Styled Components는 props로 넘겨준다든지, 다양한 보완책이 있다! 또한 전역으로 createGlo

reasonz

css 파일과 컴포넌트 파일을 분리해서 사용하다가 이번에 Styled Components를 적용해보았다. 컴포넌트 파일명도 통일시켜서 관리하는게 좋을까 싶어서 파일명도 변경해보았다. styled-Components 적용 확실히 순수한 css 파일을 별도로 관리하는 것보다 자바스크립트 파일에서 스타일 컴포넌트를 사용하니 이전에 생긴 중복 스타일 문제라던가, 스타일 상속과 같은 재사용 부분이라던가, 스타일 컴포넌트 관리가 쉬워졌다. 남은 css 파일 하나만 스타일 컴포넌트로 만들면 css 파일을 다 없앨 수 있다! > state 관리는 어떻게 해야되나 일단 고민중..ㅎㅎ 사용 방법 Styled component 라이브러리 설치부터 하고 시작하면 된다. 라이브러리 설치가 완료됐다면

alsejr1004

Style Import > 작성한 Style은 Import를 통해 컴포넌트에서 공유 컴포넌트의 규모가 커질수록 관련된 파일들이 많이 생성되어 구조화가 복잡해진다. 그래서 로직과는 상관없는 StyledComponents코드는 개별 파일로 관리**해 필요시 컴포넌트에서 Import를 사용**_한다. 위와 같이 코드를 분리하면 핵심적인 기능을 담당하는 파일들은 시각적으로 정리되어 가독성이 향상된다. Global CSS > Global CSS는 프로젝트 전역 단위로 style을 적용 Global CSS_는 createGlobalStyle을 사용하며 _프로젝트 전역 단위의 강력한 Style을 적용하여 기존의 적용되 있던 Style을 덮어씌운다. 즉 기존 StyledComponents**(style.div, `

alsejr1004

Style Props > Props를 통해 조건식을 사용하여 동적 Style 변경 StyledComponents**는 내부적으로 Props를 전달받을 수 있는데 이를 통해 _**조건식을 사용하여 동적으로 컴포넌트 style을 변경할 수 있다. 아래 예제는 Style Props를 이용하여 과일의 갯수가 3개 이상이 되면 컴포넌트의 style을 변경한다. Transient Props Style Props_가 전달되는 과정에서 React 노드, 혹은 DOM 요소로 렌더링되어 성능에 _악영향을 줄 수 있다. 이 때 _**변수 이름 앞에 $ 기호를 사

alsejr1004

Styled_Components > 컴포넌트에 CSS를 미리 적용하여 생성하는 CSS전처리기 JavaScript_에서는 DOM Element에 특정 이름(id, class)을 부여해 _CSS파일에서 style을 개별적으로 관리했다. styled-components는 위의 방법과는 다르게 컴포넌트 자체에서 이름을 부여해 style을 지정한다. 이러한 방식은 컴포넌트 내부에서 style을 적용하기 때문에 CSS가 전역으로 중복되지 않는다. 기본적인 사용방법은 다음과 같다. 사용 방법 아래 명령어를 통해 관련 패키지를 설치한다. 템플릿 리터럴(Template literal)을 사용해 styled components를 생성하여 변수에 할당한다. 변수를 사용

lumpenop

Styled-Components React 배우고 css를 어떻게 적용해야할지 몰라 무작정 배웠던 그것 덕분에 scss문법을 배울 수 있었다 Styled-Components는 css in js 문법으로 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것 개인적으로는 jsx에서 사용하는 상태 값에 따라 변하는 style을 줄 때 편한 것 같다 설치 global style

cjs0097

CDD(Component-Driven Development)란 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했고 기획자가 요청한 사항에서 버튼에 대한 기획이 이전에 요청받았던 버튼을 똑같이 사용하도록 요청했을때 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Component Driven Development (CDD) > ### Styled Components CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. 설치 방법 터미널에 명령어 npm install styled-components 입력 그 다음 Styled Components를 사용할 파일로 import `impo

hyeongjoon

Project https://github.com/leehyoungjoon/32-2nd-TerraBox-frontend Project Overview 정신없이 지나가버린 첫 프로젝트가 끝난 후 주말 간 짧은 휴식과, 재정비를 한 후 대망의 두번째 프로젝트로 "메가박스"사이트를 만들게 되었다. 사이트가 정해지고 사이트를 둘러보니 딱 끌려서 하고 싶은 페이지를 발견했다 바로, 예약페이지다 프론트단에서도 데이터를 필터를 해야 할 부분이 많아서 까다로워 보여서 어려워 보였고 1차 프로젝트때 많이 경험하지 못한 벡앤드와의 긴밀한 소통이 필요해 보였다 그런 이유로 예약페이지를 구현하고 싶었고 하게 되었다 꽤 어려운 작업이였지만 끝까지 긴밀하게 옆에서

minu_624

이모션 설치 1. css Prop 0. 사전설정 : JSX Pragma(JSX 컴파일 지시자)를 사용하기 css prop를 사용하는 원본파일에 jsx pragma를 설정한다. 이 방법은 css props를 테스트하거나 바벨 config를 구성할 수 없는 cra or codesandbox에 적합하다. CRA4 버전에서는 대신 를 사용한다 만약에 jsx pragma를 설정하지 않는다면 css prop의 값은 를 렌더한다. 1. Oject Style css prop은 object style로 사용할 수 있다. 2. String style 3. Style Precedence className prop은 emotion styles의 css prop에 오버라이딩 된다. emotion style이 아닌 클래스네임은 무시되고 계산된 이모션

lilys2

리액트에서 css이외에 스타일을 어떻게 넣어줄 수 있는지를 배운 섹션이다. 기존 프로젝트에 스타일을 손대기는 너무나도 큰 일이여서 배운 내용과 예시 코드를 간단하게 정리해보려한다. +)섹션 7의 내용도 간단해서 하단에 짧게 정리해두려한다. inline styles 리액트 안에서 style을 지정해주는 방식이다. {}안에서 삼항 연산자를 써서 스타일을 다르게 지정해줄 수 있다. 예시 코드 step이 현재 버튼의 id값과 같으면 activeStyle이 적용되도록 하는 코드 직접 속성별로 지정해줄 수도 있다. 클래스 이름으로 구분하기 className에서 삼항연산자를 이용하여 이름을 다르게주고, CSS에서 속성을 추가해주는 방법도 있다. 예시 위와 같이 `

jmean12

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다. styled-coponents 는 styled-components 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내에서 일반 CSS로 구성 요소의 스타일을 지정할 수 있다. 설치 > ### 사용방식 > ### 장점 1. component 단위 스타일링 styled-components로 생성된 Components들을 빌드하면 임의의 클래스 명에 스타일이 적용되어 있는 것을 확인 할 수 있습니다. styled-components는 중복되지 않는 특정 class명을 생성해 스타일을 적용하기 때문에, className이 중복되거나 selector의 우선 적용 순위 때문에 css 스타일링이 혼선을 일으키는 사고를 방지 할

zerozoo-front

TOC 사족 어떻게 구현할 것인가? 구현에서의 문제점과 해결책 구현 0. 사족 react+styled components로 modal을 구현해보려 한다. 이전에 react class component + css를 이용해 구현해본 적이 있기 때문에 그 방식을 그대로 따라가려 했지만 hooks는 다른점이 존재하고 그 방식을 이해하고 구현하기까지 시간이 소비되었다. 1. 어떻게 구현할 것인가? modal창의 기본은 이미 입력되어 있는 내용의 css display값을 끄고 켜주는게 기본이다. 따라서 component 혹은 DOM 값에 삼항 연산자로 className을 state의 변화에 따라 선택되게 끔 하는 것이 가장 첫 걸음일 것이다. 여기까지는 스무스하게 진행이 된다. 문제는 그 다음이다. 2. 구현에서의 문제점과 해결책 같은 className의 문제 outside click의 문제

zerozoo-front

TOC useEffect로 scroll event 감지하기 state의 변화를 감지해 style 변화시키기 style을 동적으로 변화시키기 1. useEffect로 scroll event 감지하기 react는 기본적으로 js문법을 존중한다. 따라서 js를 최대한 활용해주도록 하자. js의 addEventListener를 사용할 것이다. useEffect를 통해 window.scroll의 이벤트를 감지하는 방법 addEventListener useEffect는 component의 렌더를 감지하고 렌더가 다 진행되고 나서 이벤트를 시작시킨다. 두 번째 인자로 조건을 걸어주지 않으면 매 렌더시마다 콜백 함수를 실행시켜준다. 이 useEffect에 대해 eventListener를 걸어주도록 하자. scroll의 특정 값에서 이벤트를 실행시켜 주기 위해서는 항상 scroll의 값을 볼 수 있는 위치가 적절한데 이는 useEff

ggombee

🔍Project Overview 1. Summary 👉 Purpose 기본적인 커뮤니티 기능을 오직 자바스크립트와 리액트로!! 리액트의 기본기를 충실히 다지는 것을 목표로 상태관리 라이브러리(리덕스, 몹액스, 리코일 등)를 빼고 만들어보기! Develop function of basic community with Javascript, CRA without state management library (redux, mobx, recoli,,) aiming to strengthen the basics of React. 코드의 확장성을 생각하며 개발을 진행하기! Thinking about the extensibility of the code in developing. 디자인에 따라서 컴포넌트 분리를 효율적으로 할 수 있는 방법을 고안해내기! Inventing a efificent way to seperate compo