본문 바로가기

분류 전체보기

(6)
[React] option select 속성, defaultValue & value 속성 에러 React에서 option에 selected 속성을 사용하면 이런 에러가 뜬다. selected 대신 defaultValue나 value 속성을 사용하라는 에러이다. Warning: Use the `defaultValue` or `value` props on instead of setting `selected` on .  그렇다고 selected 속성 대신 defaultValue와 value를 모두 뜨면 이런 에러가 뜬다. Warning: Select elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between usi..
[styled components] select 태그 placeholder 색상 설정 색상 설정const SelectInput = styled.select` color: ${(props) => props.value === "default" ? "#8b8b8b" : "#000000"};`const StyledOption = styled.option` color: #000000;`styled-components 부분은 이렇게 정의하고, placeholder로 설정할 option의 색은 "#8b8b8b" 부분에 적어주면 된다.나머지 option은 Option 컴포넌트를 사용하면 된다. 숫자를 선택해주세요 1 2 3
[styled components] input type="number" 화살표 제거하기 에서 화살표 없애는 방법const TextInput = styled.input` &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }`
[React Native] image 사이즈 조정 const Styles = StyleSheet.create({ image: { width: 15, height: 15, resizeMode: "contain", },});참고로 이미지를 피그마에서 export할 때는 화질 때문에 x2로 export해야하고, 경로는 위처럼 {상대경로}를 쓰는 것이 좋음. ++ 이때 png로 export 했던 것 같은데 svg 쓰세요~
[React Native] text와 image 한 줄에 넣기 텍스트와 이미지를 한 줄로 넣는 방법은 생각보다 간단하다. 사이에 를 넣어주면 된다. 참고로 이미지는 assets 밑에 이미지 폴더를 만들어서 미리 넣어둔 후 주소로 import 해오면 된다.import image1 from '../assets/images/이미지명.png';여기에 텍스트 작성
[React Native] border를 이용해서 구분선 만들기 container border를 이용해서 간단하게 구분선 만들기//구분선을 만들 js 파일const Styles = StyleSheet.create({line: { flex: 17, borderBottomWidth: 1, width: "100%", borderBottomColor: '#E1E2E4', },});이렇게 하면 container 아래에 구분선이 생긴다.왼쪽에 하고 싶으면 borderLeftWidth, 오른쪽은 borderRigthWidth, 위쪽은 borderTopWidth를 쓰면 된다.참고로 내 구분선은 container 안에 있는 container의 border를 이용한 구분선이라 왼쪽과 오른쪽에 여백이 있다. 그런데 이렇게 하면 요소 사이에 구분..