React (13) 썸네일형 리스트형 react-hook-form 사용기 이번 실전프로젝트에서는 react-hook-form 이라는 라이브러리를 사용해보기로했다. 항상 로그인이나 회원가입창을 만들때에, input 태그에 중복된 코드가 너무 거슬렸다. 그리고 제어컴포넌트로써 인풋창에 한 글자씩 타이핑될때마다 렌더링되는 것도 거슬렸다. 그리하여 이 모든 것을 해결해줄 react-hook-form을 쓰기로 했다. 아래는 기존의 회원가입 코드이다. 아이디 {isEdit && ( 닉네임 )} 비밀번호 {isEdit && ( 비밀번호 재확인 )} 아래는 react-hook-form을 사용하여 나타낸 회원가입코드이다. helper text를 띄움에도 불구하고, 훨씬 짧고 간결하게 코드를 작성할 수 있다. {" "} {" "} {errors.userId && ( {errors.userId... 리액트 제어컴포넌트와 비제어 컴포넌트 제어컴포넌트(controlled component) 아래는 공식문서에 나오는 설명입니다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. export default function App() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); }; return ( ); } .. 리액트 geolocation으로 내 위치 좌표값 가져오기 처음에는 너무 신기했다. 내가 있는 위치를 좌표값으로 어떻게 가져오지?? 주위에 있는 유/무선 공유기, 휴대전화 기지국, 각종 네트워크 장비들로부터 획득한 위치 정보 데이터를 사용해서 자신의 위치를 계산해준다고 한다. 그래서 내가 있는 곳의 네트워크 또는 통신 상태에 따라서 위치 정보가 부정확할 수 있다고 합니다. 물론 단말기에 GPS 모듈이 있는 경우에는 비교적 정확할 것이다. 아래는 geolocation을 사용하는 방법이다. 내 위치를 좌표값으로 가져오기 위해서 위와 같은 함수를 불러온다. 그냥 복붙해서 사용하면된다. navigator.geolocation.getCurrentPosition(success, error, options); 위의 (success, error, options) 세 가지 인자.. useEffect() 가 뭐꼬? useEffect(() => { console.log('effect'); console.log(name); return () => { console.log('cleanup'); console.log(name); }; }, []); useEffect(() => { console.log(name); console.log('업데이트 될 때 실행된다'); }, [name]); 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 아래 코드를 통해, 함수 불러오기 import React, { useEffect } from 'react'; 1. Component가 mount .. 리액트를 시작하는 첫 걸음 개발환경 셋팅 Node.js 설치 vscode 설치 바탕화면에 작업파일 만들기 작업파일 (shift + 우클릭으로 파일 선택 후, PoewrShell 창 열기 클릭) PowerShell창이 열리면, npx create-react-app 프로젝트이름 을 쳐준다. vscode 열어서 해당 폴더를 열어보면, 리액트가 깔려있다. 왼쪽 src파일 안의 App.js 를 열고, 터미널에 npm start를 쳐보자. (이때 파일경로가 정확한 지 확인해야 함.) 로컬창이 뜨면 실행 성공! Create React App을 설치함으로써, 자바스크립트에 html형식의 코드가 실행된다. (index.js 파일이 자동으로 App.js의 코드를 html파일로 보내줌) 아래 강의를 보면 더 쉽게 이해할 수 있다. https://ww.. 이전 1 2 다음
