어리둥절 분석가 그리고 개발자

✔️ 필요성 styled-components를 적용한 컴포넌트를 만들어놓고, 그 컴포넌트를 다시 가지고 올 때 일부 CSS를 수정하고 싶을 때가 있다. 그리고 그 때 styled(component) 이렇게 해서 쓰는 것을 보통 Extend styled-component라고 이야기한다. 그런데 Extend Style이 안 먹을 때가 있다. 새로 적용하는 CSS style을 어떤 컴포넌트에다가 써야할 지 모르는 경우에 보통 그러하다 import React from "react"; import styled from "@emotion/styled"; const Outside = styled.div` `; const Inside = styled.div` `; interface Props { children: Re..

✔️ 필요성 버튼 컴포넌트를 만들 때 사이즈나 컬러에 따라서 CSS 분기를 깔끔하게 해주고 싶을 때가 있다. 이 때는 className과 &를 활용해서 코드를 아주 깔끔하게 만들어줄 수 있다! ✔️ 예시 import styled from "@emotion/styled"; const Container = styled.button` display: inline-block; flex: none; width: 100%; max-width: 100%; background: transparent; appearance: none; cursor: pointer; text-align: center; text-decoration: none; font-weight: 600; color: ${(props) => props.t..

✔️ 필요성 classNames는 true/false boolean 값을 통해서 특정 스타일링을 할 지 말지 쉽게 분기하도록 도와주는 라이브러리이다. 컴포넌트의 props가 Active일때랑 Active가 아닐 때 보기 쉽게 CSS를 정리해보자 ✔️ Props를 사용할 때 isActive의 값에 따라서 ? : 삼항연산자를 활용해서 다른 CSS를 줄 수도 있는데, 정확하게 isActive일 때 어떤 효과들이 들어갔는지 한 눈에 확인하기가 어렵다는 단점이 있다 const TabAnchor = styled.button` color: ${({ theme, isActive }) => isActive ? theme.colors.white : "#333333"}; background-color: ${({ theme,..

✔️ 필요성 글자 길이가 해당 Container의 길이보다 길면 말줄임표(...)로 줄이고 싶을 때가 있다 ✔️ 방법 (1) 직접 truncate 함수를 짜서 길이를 몇으로 할 것인지 정해준다 // 글자 후반부를 자르고 ..으로 대체 export const truncate = (word: string, n: number) => { if (word.length < n + 1) return word; return word.substr(0, n).concat('..'); }; ✔️ 방법 (2) 방법(1)보다 방법(2)가 더 선진 방법이다. CSS에서 max-width를 지정해준다음에 컴포넌트 props에서 numberOfLines를 1로 지정해주면 된다! import React from 'react'; imp..

✔️ 필요성 줄 너무 심각하게 마음에 안든다 어떻게 없애지 ✔️ 문제 해결 BottomBorder라고 생각했었는데 알고보니 그림자였다. 삽질 다 해봤는데 headerShadowVisible: false로 해주면 없어진다! //...

✔️ 필요성 styled-components에서 props를 받아서 그 값에 따라 다르게 컴포넌트를 꾸미는 방법이 있다. 자세한 건 아래 포스팅을 참고! Styled-Components로 React Native Pressable 꾸미기 React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 이 pressed 되었을 때를 꾸밀 수 있다 [ styles.submit, Platform.OS === 'ios' && pressed && styles.submitPressed, ]} android_ripple={{color: '.. sezzled.tistory.com props 값을 받아서 props 값에 따라 theme에 있는 컬러를 가지고 오고 싶을 때는 어떻게 하나? ✔️ 문제 상황 내가..

React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 이 pressed 되었을 때를 꾸밀 수 있다 [ styles.submit, Platform.OS === 'ios' && pressed && styles.submitPressed, ]} android_ripple={{color: '#42a5f5'}} onPress={onPress}> 회원가입 const styles = StyleSheet.create({ submit: { marginTop: 24, backgroundColor: '#2196f3', height: 56, borderRadius: 4, alignItems: 'center', justifyContent: 'center', }, submitPressed: { opacit..

// theme.ts export const theme = { colors: { 'subway-line-1': '#0d3692', 'subway-line-2': '#33a23d', 'subway-line-3': '#fe5d10', 'subway-line-4': '#00a2d1', 'subway-line-5': '#8b50a4', 'subway-line-6': '#c55c1d', 'subway-line-7': '#54640d', 'subway-line-8': '#f14c82', 'subway-line-9': '#aa9872', }, }; import React from 'react'; import {ThemeProvider} from '@emotion/react'; import {NavigationCont..

React Native ScrollView에서 중앙정렬하기 내가 하고 싶었던 것은 가로로 Scroll할 수 있는 영역을 설정하고, 그 속에 있는 컴포넌트들이 중앙에 위치한 형태를 만들고 싶었다. 하나도 안 어렵지 하면서 아래와 같이 align-itmes를 중앙으로 설정했는데 에러가 발생했다. import React from 'react'; import Styled from 'styled-components/native'; const Container = Styled.ScrollView` flex-direction: row; align-items: center; `; 문제해결 : attrs() 활용 이 때에는 import React from 'react'; import Styled from 'styled-..