728x90 728x90 Frontend54 React 유효성 검사 유효성 검사의 시점 개발자의 시각에서 폼은 그 입력은 넓고 다양한 상태를 나타낼 수 있어서 굉장히 복잡할 수 있다. 하나 이상의 입력 값이 모두 유효하지 않을 수도 있으며 모두 유효할 수도 있고 심지어는 서버로 요청를 보낸 뒤에 특정 값이 사용 가능한지 비동기 유효성 검사를 해야해서 상태를 알 수 없을 수 있다. 그러면 언제 유효성을 검사를 해야할지가 문제이다. 1. 폼이 완전하게 제출되었을 때 사용자 입력의 유효성을 검증할 수 있습니다 폼이 완전하게 제출된 뒤에 유효성 검증을 할 때에는 사용자가 입력하는 중에 완전히 입력하지도 않았는데 입력이 틀렸다고 하지 않을 수 있다. 사용자가 입력을 마칠 때 까지 기다린 뒤에 에러를 보여주게 되므로 불필요한 경고를 줄일 수 있다. 단점은 피드백이 늦어 사용자가 값.. 2023. 2. 9. React 사용자 입력 다루기 form과 input을 다루는 기본적인 방법 사용자의 입력을 받은 다음에 그 입력 값에 대한 유효성을 검증하고 필요한 경우에 사용자에게 에러 메시지를 띄울 수 있다. 먼저 사용자 입력을 가져오는 방법은 크게 두 가지 방법이 있는데 모든 키 입력마다 확인하며 이 값들을 상태 변수에 저장할 수 있고 ref를 이용하여 사용자가 값을 모두 입력했을 때 입력 값을 가져올 수도 있다. state를 이용하는 방법 import { useState } from "react"; const SimpleInput = (props) => { const [enteredName, setEnteredName] = useState(""); const onChangeHandler = (event) => { setEnteredName(e.. 2023. 2. 8. React Custom Hooks 개념 및 사용 방법 React Custom Hooks 개념 및 사용 방법 커스텀 훅은 결국은 useState와 같은 내장 hook처럼 정규 함수이다. 하지만 안에 상태를 설정할 수 있는 로직을 포함한 함수이다. 커스텀 훅을 통해, 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱할 수 있으며, 이를 통해 다양한 컴포넌트에서 호출이 가능하다. 아래 코드에서 사용된 BackwardCounter와 ForwardCounter는 App에서 컴포넌트로 사용되고 있다. ForwardCounter와 BackwardCounter는 모두 useState와 useEffect를 통해 상태를 관리하고, 시간 간격을 만들어서 매 초 마다 새로운 카운터 상태를 설정한다. 똑같은 일을 하지만 한 가지 다른점은 역방향으로 카운팅을 한다. .. 2023. 2. 7. React HTTP 요청 개념 및 사용 방법 React HTTP 요청 개념 및 사용 방법 리액트 앱이나 일반적인 브라우저 앱에서 실행되는 자바스크립트 코드가 데이터베이스와 직접 통신하면 안된다. 클라이언트 내부에서 데이터베이스에 직접 연결을 하게 된다면 코드를 통해 데이터베이스의 인증 정보를 노출시키는 행위이기때문이다. 브라우저에서 실행되는 모든 자바스크립트 코드는 브라우저뿐만이 아니라 웹 사이트의 사용자들도 접근하고 읽을 수 있다. 따라서 리액트 앱 코드 내부에서 데이터베이스에 직접적으로 통신하는 것 대신에 다른 방법을 사용해야 한다. 예를 들어 백엔드 어플리케이션안데 데이터베이스 서버일 수도 있고 보통은 다른 서버일 경우가 많다. 그리고 데이터베이스와 통신하는 백엔드 어플리케이션은 사용자가 코드를 확인할 수 없기 때문에 데이터베이스의 인증 정보.. 2023. 2. 6. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음 728x90 728x90
