on&on

react-hook-form을 사용하여 validation을 구현하던 중에 error를 경고창으로 처리할 경우, input에 포커스되면서 입력창이 초기화되는 형태로 구현하기 위해 찾다가 setFocus와 reset을 발견했다. 처음에는 shouldFocusError를 사용해보려고 했지만 ref를 사용해서 나중에 input을 customInput으로 뺀 후에 forwardRef를 통해 쉽게 ref를 처리하는 형태로 사용해보려고 한다... react-hook-form을 사용하는 것이 목적이었기 때문에 일단은 setFocus와 reset을 사용해서 구현했다. 이러한 형태의 email을 입력하는 input이 있다. if (!response.message) { // 응답에 성공했을 때 } else { alert(..

모듈화한 버튼을 Link로 사용하고자 하는데 적용이 안되는 경우 버튼을 모듈화해서 사용하다가 Link로 사용하려고 하는데 아래와 같은 에러가 발생했다. 모양은 똑같은데 다른 태그에서는 적용이 안되는 건지에 대한 해답을 찾아보았다. import Button from "../src/module/Button/Button" // 모듈화한 버튼을 import 한다. function App(){ return ( {/* 여기서 모듈화한 Button과 Link를 함께 사용해야 하는 상황 */} ) } export default App; "Button is not a styled component and cannot be referred to via component selector." 어떻게 해결해야 하는지 공식문서를..

프로그래머스 평행 문제 설명 점 네 개의 좌표를 담은 이차원 배열 dots가 다음과 같이 매개변수로 주어집니다. - [[x1, y1], [x2, y2], [x3, y3], [x4, y4]] 주어진 네 개의 점을 두 개씩 이었을 때, 두 직선이 평행이 되는 경우가 있으면 1을 없으면 0을 return 하도록 solution 함수를 완성해보세요. 제한사항 • 0 ≤ dots의 원소 ≤ 100 • dots의 길이 = 4 • dots의 원소의 길이 = 2 • dots의 원소는 [x, y] 형태이며 x, y는 정수입니다. • 서로 다른 두개 이상의 점이 겹치는 경우는 없습니다. • 두 직선이 겹치는 경우(일치하는 경우)에도 1을 return 해주세요. • 임의의 두 점을 이은 직선이 x축 또는 y축과 평행한 경우..

CRA에서 제공하는 Custom Templates으로 나만의 템플릿 만들기 Create-react-app에서는 사용자 정의 템플릿을 사용하여 CRA의 기능을 유지하면서 템플릿을 제작할 수 있는 서비스를 제공하고 있다. 사용자가 원하는 형태로 제작할 수 있기 때문에 npm 사이트에 cra-template을 이를 활용한 다양한 템플릿을 볼 수 있다. 자신이 잘 사용하는 리액트 폴더 구조가 있다면 템플릿을 직접 제작하여 사용하는 것도 좋은 방법이고, 또는 다양한 기능을 만들어 오픈 소스로 활용할 수도 있다. 📎 생성 방법 1. create-react-app으로 새 프로젝트를 생성한다. npx create-react-app cra-template-폴더명 ⚠️ 이 때 cra-template으로 프로젝트 이름이 시..

프로그래머스 캐릭터의 좌표 문제 설명 머쓱이는 RPG게임을 하고 있습니다. 게임에는 up, down, left, right 방향키가 있으며 각 키를 누르면 위, 아래, 왼쪽, 오른쪽으로 한 칸씩 이동합니다. 예를 들어 [0,0]에서 up을 누른다면 캐릭터의 좌표는 [0, 1], down을 누른다면 [0, -1], left를 누른다면 [-1, 0], right를 누른다면 [1, 0]입니다. 머쓱이가 입력한 방향키의 배열 keyinput와 맵의 크기 board이 매개변수로 주어집니다. 캐릭터는 항상 [0,0]에서 시작할 때 키 입력이 모두 끝난 뒤에 캐릭터의 좌표 [x, y]를 return하도록 solution 함수를 완성해주세요. • [0, 0]은 board의 정 중앙에 위치합니다. 예를 들어 board의..

npx create-react-app 사용 시, 기본 파일만 설치하기 처음 React를 사용하는 사람이라면 자주 만나게 되는 명령어인 npx create-react-app npx create-react-app my-app명령어를 통해 설치를 하고 나면 기본적인 React 프로젝트 형태가 갖춰진다. 처음 설치하는 사람이라면 폴더 목록을 보고 당황할 것이 당연한 파일 목록.... 너무 많은 파일이 생성된다... 이 중에 사용하지 않는 파일이 사용하는 파일보다 더 많다... 실질적으로 사용하는 index.html, index.js, App.js 코드를 바꾸고, 다른 파일을 삭제하는 데 시간이 너무 오래 걸린다. 그래서 create react app에서 제공하는 사용자가 직접 커스텀하고 템플릿을 만들 수 있는 ..

props가 무엇인지 이제는 알고쓰자! props의 정의 props는 컴포넌트 속성을 설정할 때 사용하는 요소 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸기 위해서는 부모 컴포넌트에서 바꾸어 주어야 한다. props 기본값 설정 : defaultProps name 값을 지정하지 않아도 기본값을 설정하여 보여줄 수 있다. const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name}입니다. } MyComponent.defaultProps = { name: 'dan' }; export default MyComponent; 위 코드와 값이 defaultPr..

Each child in a list should have a unique "key" prop 목록의 각 자식 요소는 고유한 "키" 값을 가지고 있어야 합니다. 무지성으로 코드를 짜다보면 만나게 되는 경고 이 에러가 발생하는 이유와 React의 key에 대해 간단하게 알아보자 아래의 코드를 실행시켰다. // Sample.js import React from "react"; const IterationSample = () => { const names = ["눈사람", "얼음", "눈", "바람"]; const nameList = names.map((name) => {name}); return {nameList}; }; export default IterationSample; // App.js import..