728x90 반응형 SMALL App Programming/React5 [React] 회원 가입 폼 react-router-dom 리액트에서 페이지를 전환하기 위해 사용하는 모듈이다. /code/web # npm install react-router-dom@6 CodePen 코드펜은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티이다. Home.tsx src 폴더에서 pages 폴더를 만들고 제일 먼저 보여줄 home.tsx 페이지를 생성한다. function Home = () => { return ( Home ) } export default Home; User.tsx 사용자 페이지를 보여주는 User.tsx를 생성한다. function User = () => { return User } export default User; Profile.tsx c.. 2023. 2. 23. [React] 템플릿 언어 (2) 폼 (Form) 양식 (form)은 웹 어플리케이션에서 사용자로부터 데이터를 입력 받기 위해서 필수적인 기능이다. 다시 말해, 리액트에서 검증을 위한 도구이다. npm install react-form-hook register handleSubmit errors getValues setValue 검증 required min, max minLength, maxLength pattern axios 모듈 서버로 요청을 보내기 위한 도구로 axios는 비동기 http 요청이다. axios.defaults는 모든 요청에 적용될 값을 지정할 수 있다. npm install axios baseURL headers common : 모든 요청에 대한 헤더 post : 포스트 요청에 대한 헤더 정의 withCredenti.. 2023. 2. 20. [React] 템플릿 언어 (1) 템플릿 언어 장고 프레임워크에서 파이썬 변수 및 문법을 html 안에서 쓸 수 있도록 장고에서 제공해주는 언어이다. JSX (JavaScript XML) 리액트에서 사용하는 자바스크립트를 확장한 언어이다. HTML 태그와 컴포넌트로 컴포넌트의 구조를 표현한다. 중괄호 ({,})에 자바스크립 표현식을 사용할 수 있다. HTML과 다르게 클래스 적용을 위해서는 className을 사용해야 한다. 컴포넌트는 반드시 루트 요소 하나를 반환해야 한다. 훅 (Hook) Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 컴포넌트 코드를 간단하게 해준다. useState 상.. 2023. 2. 20. [React] 프로젝트 구조 프로젝트 구조 npx create-react-app web --template typescript npm start : 프로젝트 실행 npm build : 프로젝트 빌드 프로젝트 확인 : 크롬 주소창에서 localhost:3000 SPA (Single Page App) 싱글 페이지 애플리케이션은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다. 기존 앱은 전체 페이지를 서버에서 받아왔다. SPA는 처음 필요한 데이터를 가져오고 페이지 전환없이 일부를 렌더링한다. 컴포넌트 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위를 말한다. 사용자 정의 태그 클래스 기반 컴포넌트 함수 기반 컴포넌트 2023. 2. 20. 리액트 (React) 리액트 (React) 리액트 (React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로써, 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지, 보수된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다. 설치 https://nodejs.org/en/에서 Node.js을 설치하고 터미널에서 확인한다. /* 설치 확인 */ npm -v https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaS.. 2022. 9. 4. 이전 1 다음 728x90 반응형 LIST
