728x90 728x90 Frontend/React30 React 라우팅 개념과 사용 방법 라우팅이란? 라우팅이란 URL의 여러 경로로 서로 다른 페이지를 로드할 수 있는 기능이다. 웹사이트는 하나의 특정 기능에 대해서 다른 경로를 가지는 다른 페이지를 로드하므로 URL이 변경되면 페이지에 보이는 콘텐츠가 변경된다. 이처럼 호출하려면 다른 페이지가 있으며 각 페이지에는 자체 URL 또는 도메인 뒤에 고유한 경로가 있어야 하고 경로가 변경되면 페이지의 콘텐츠도 변경되어야한다. 리액트로 작업하지 않을 때는 HTML 파일을 다시 보내는 서버가 있고 서버에 다른 HTML 파일을 저장하거나 해당 파일을 서버에서 동적으로 생성하여 콘텐츠를 보여준다. 이 방식은 URL에 대한 요청이 오면 다른 HTML 페이지가 클라이언트로 다시 전송되고 이 페이지는 브라우저에서 렌더링 된다. 즉, URL을 변경할 때마다 .. 2023. 2. 17. 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. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 728x90
