react (40) 썸네일형 리스트형 [리액트 React] value를 react-select에 반영하는 방법/react-select value를 지정해주는 방법/How to assign value to react-select 안녕하세요. 디자인도 하고, 개발도 하는 '디자인 뚝딱'입니다. 이번 포스팅에서는 react-select를 사용할 때 value를 지정해주는 방법에 대해 다루겠습니다. 혹은 선택한 value를 react-select에 반영하는 방법입니다. 혹은 react-select 상태를 바꾸는 방법입니다. 저는 react로 개발할 때 selectbox를 사용해야 될 상황이 되면 거의 react-select 라이브러리를 사용합니다. style도 심플해서 만족스러워요. 이전에 올렸던 react-select 관련 포스팅도 참고하세요 :) [ react-select 초기화 하는 방법 ] [리액트 React] react-select 초기화 / How to initialize react-select / How to reset .. [리액트 React] checkbox 하나만 선택되도록 하는 법 / How to make only one input checkbox checked 안녕하세요. 디자인도 하고, 개발도 하는 디발자 뚝딱입니다. 이번 포스팅에서는 리액트에서 input checkbox 하나만 선택되도록 하는 방법에 대해 공유하겠습니다. I will share how to make only one input checkbox checked in React. 즉, 체크박스 중복선택을 막는 방법입니다. 설문조사 같은 페이지를 개발할 때 사용하면 유용합니다. 잊을만 하면 한번씩 쓰이는 기능이랍니다. 리액트에서 checkbox 하나만 선택되도록 하는 방법 checkOnlyOne 함수를 유의해서 봐주세요. 체크된 value를 가져올 때 state를 사용했습니다. import React, {useState} from "react"; export const Example = () => .. [리액트 에러 React/RN Error] A component is changing an uncontrolled input of type undefined to be controlled. 안녕하세요. 디자인도 하고 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트 혹은 리액트네이티브로 개발하다가 만날 수 있는 Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 에러 해결 방법에 대해 알아보겠습니다. 먼저 이 에러를 번역해 볼게요. 구성 요소가 제어할 .. [리액트 React / React Typescript] 천 단위 콤마(,)넣기 / How to Use Comma(,) as Thousand Separator in React / How to Use Comma(,) as Thousand Separator in JavaScript 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 input에 천 단위/천원 단위 콤마(,) 넣는 방법에 대해 공유하겠습니다. How to Use Comma(,) as Thousand Separator in React. 금액 혹은 포인트를 다룰 때 유용하게 쓰이겠죠? 확실히 콤마(,)가 있으면 숫자를 읽을 때 가독성이 높아집니다. 글 하단에는 리액트 타입스크립트 버전도 준히배놨으니 참고하세요 :) There is also a React TypeScript version at the bottom of the post. input에 사용하는 방법을 적어놨지만, 굳이 input이 아니더라도 일반 텍스트에 addComma() 함수를 사용해도 괜찮습니다. 코드를 보기 전.. [리액트 React] fullPage 사용 시 상단으로 이동하기 / 100vh 스크롤 이벤트 / 100vh scroll / How to get to the top 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 fullPage jQuery 라이브러리 사용 시 상단으로 이동하는 방법에 대해 공유하겠습니다. 이전에 100vh를 사용하여 스크롤마다 전체 화면이 바뀌는 fullPage jQuery 사용 방법에 대해 공유했었는데요. [리액트에서 fullPage 사용하는 방법] [리액트 React] fullPage 사용하기 / 100vh 스크롤 이벤트 / 100vh scroll / Type annotations can only be used in TypeSc ** 2022.10.09 내용 추가 : anchorLink 인자를 사용하는 방법을 추가했습니다. 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅은.. [리액트 React] react-select 초기화 / How to initialize react-select / How to reset re 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 react-select 초기화 하는 방법에 대해 공유하겠습니다. 그리고 덤으로 react-select value가져오는 방법도 공유할게요 :) 리액트로 개발 시 react-select는 너무나도 자주 사용하는 라이브러리죠. react-select A Select control built with and for ReactJS. Latest version: 5.4.0, last published: 3 months ago. Start using react-select in your project by running `npm i react-select`. There are 5401 other projects in the npm r.. [리액트네이티브 ReactNative] iOS 키보드 안 보일 때 해결 방법 / How to fix the keyboard not showing up / react native textinput keyboard dosen't appear 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트네이티브로 개발 시 키보드 안 보일 때 해결 방법에 대해 공유하겠습니다. React native textinput keyboard dosen't appear iOS 시뮬레이터에서 textinput을 클릭해도 키보드가 안 나타나서 이 게시글에 들어오셨죠? 그렇다면 제대로 찾아오셨습니다! 해결 방법 1 iOS simulator 안에 있는 Textinput에 focus한 상태로 command(cmd) + K를 입력한다. 해결 방법 2 iOS simulator 상단 탭 > I/O > Keyboard에서 Use the Same Keyboard Language as macOS와 Connet Hardware Keyboard 를 체.. [리액트네이티브 에러 ReactNative Error] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는, 리액트네이티브로 개발 중 만날 수 있는 Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 에러 해결 방법에 대해 공유하겠습니다. 에러 확인 에러내용을 자세하게 봐볼까요? nvariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incrrect.. [리액트네이티브 ReactNative] This syntax requires an imported helper named ‘__spreadArray’ which does not exit in ‘tslib’. 에러 해결 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 리액트네이티브 빌드하는 과정에서 이런 에러를 만났는데요. This syntax requires an imported helper named ‘__spreadArray’ which does not exit in ‘tslib’. 번역기를 돌려보면 이 구문에는 'tslib'에서 종료되지 않는 '__spreadArray'라는 가져온 도우미가 필요합니다. 라고 나오네요. 말이 조금 이상한 거 같은데 tslib에서 발생한 에러라는 건 알 수 있습니다. 해결 방법 터미널을 열고, 해당 프로젝트 경로해서 아래의 명령어를 입력합니다. $ npm install tslib@latest --save 그리고 다시 리액트네이티브 빌드를 실행하여 확인해 보세요 :)
