728x90 반응형 react11 리액트 상태관리 라이브러리 React-Hook-Form 기존에는 리액트의 상태를 useState 와 onChang 를 사용 하였다. 상태관리 툴이나 라이브러리 없이 상태를 관리 해왔다. 장점은 직관적이며, 데이터의 validation , 데이터변환 등 단점은 한개의 변환시 모든 데이터, 변경하시않은 상태도 다시 랜더링 된다는것 (치명적) 사실 위 코드도 나는 형식을 잘잡아놔서 충분히 사용할수 있지만 개발자는 유행하는건 배우고 따라해봐야하니까 (귀찮) 작년말 2022년부터 현재 2023년까지 상태관리 라이브러리 "react hook form"의 사용자 수가 증가 했다. react hook form 😎 install npm i react-hook-form 😎 import import { useForm } from "react-hook-form"; 라이브러리 미사.. 2023. 3. 16. [React] 다국어 기능 적용하기 react-i18next 홈페이지에 버튼 클릭으로 다국어를 지원하는 코드입니다. 리액트 기반이며 라이브러리로 i18next 사용했습니다. 위 이미지처럼 클릭시 언어가 변경 됩니다. 폴더 구조 입니다. 😎 src > utiles > i18n > locales > en-US > index.js import page from './page.json' export default{ page } 😎 src > utiles > i18n > locales > en-US > page.json { "소개":"Intro", "인사말":"Greeting", "사업 소개":"BusinessInfo", "참여 기관":"Agency", "데이터":"Data", "안심":"Safe", "분석":"Analysis", "구역":"Zone", "마켓":"Mark.. 2022. 10. 5. [React] image 마우스 wheel 로 zoom In/Out 하기 (라이브러리 사용) react-zoom-pan-pinch 라이브러리 사용하여 스크롤로 이미지를 확대/축소 하는 기능 https://www.npmjs.com/package/react-zoom-pan-pinch 리액트로 이미지를 확대 축소하는 많은 라이브러리들이 있지만 비교적 사용이 쉽고 최근(대략 8개월) 전에 업그레이드도 진행된 편 (다른라이브러리들은 3-4년전 이 마지막 업데이트 현 리액트버전과 맞지 않은 경우도 있었다) 😎install npm i react-zoom-pan-pinch 😎 import import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; 😎 code 이미지를 감싸주기만 하면 줌 인/아웃 가능 https://prc5.gith.. 2022. 8. 30. [React] 크롬 React 디버깅 툴 설치 방법 (React Developer Tools) React 사용시 개발자모드 Elements 탭에서는 브라우저가 이해하는 코드를 보여주기 때문에 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 정확히 볼 수 없다. React Developer Tools를 사용하게 되면, 크롬 웹에서 개발자 모드로 컴포넌트(Components) 구조를 볼 수 있고 변경하면서 테스트에 용이하다. 😎 링크 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revi.. 2021. 12. 13. [React] 컴포넌트 구조 - JSX영역/함수영역/Fragment 사용법 React를 구성하는 중요 파일 react로 프로젝트 구축을 할때 중요한 3개의 파일에 대해 알려드리겠습니다. 리액트는 컴포넌트 구조*로 이루어져있습니다. 컴포넌트 타입에는 함수형과 클래스형이 있습니다. 오늘 설명드릴 내용은 '함수형'을 통한 예제입니다. 😎 컴포넌트란? UI를 독립적이고 재사용 가능하도록 나눈 조각, 기능을 단위별로 캡슐화 한 단위를 말합니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document... 2021. 11. 22. [React] 프로젝트 생성 : CRA(Create-React-App) 😎 CRA(Create-React-App) : 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 https://create-react-app.dev/docs/getting-started React 시작할때 node js 설치가 필수! vs code에서 터미널을 열어준다. vscode - 터미널 - 새터미널 ctrl + ~ : 터미널 열기 1. nodejs 다운 2. npx create-react-app 프로젝트명 3. cd 프로젝트명 4. npm start =>3000번 포트로 react 서버 온 😎 CRA 명령어 Create React App을 사용해 스캐폴딩 된 프로젝트는 다음의 4가지 명령어를 제공합니다. start → React 프로젝트 개발 서버를 시작합니다. build →.. 2021. 11. 18. [React] 기초 - 바벨/웹팩 이란? CDN을 넣어서 React 구조 만들기 실제 프로젝트를 진행할때, cdn을 넣지않고 react create 해서 사용한다. 😎 create-react-app 이란? react를 활용해 개발을 하기 위한 필수 모듈인 react, react-dom, react-scripts 외부 모듈 webpack, babel 기본 구조를 알기위해 CDN을 넣어 구조 생성 React CDN => https://ko.reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper 바벨 CDN => https://babeljs.io/docs/en/babel-standalone CDN 을 헤더 안에 붙여넣어주면 된다. - 예제 화면에 보이는 영역 -> el이라는 태그를 dom에 끼워넣는다 라고 생각하면 된다. 😎 바벨 최신 ES6버전을 .. 2021. 11. 18. React Hooks : useEffect() 함수 useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. 😎useEffect() 사용법 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 import React, { useEffect } from 'react'; useEf.. 2021. 11. 14. [노마드코더] ReactJS로 영화 웹 서비스 만들기 + Router 안녕하세요 꼬바리 입니다. 노마드 코더 에서 무료 강의인 ReactJS로 영화 웹 서비스 만들기를 완료 했다. 리액트를 처음 배우는거라 props state locetion등 어려움이 많았지만 강의 초반 기본 문법을 배우고 들어간다. 작은 app을 만들었지만 사실 이번에 배운 강의에 완전히 이해했다고 하기 어렵다 내가 만든 리액트 app으로 조금더 정리해야겠다. (난 아날로그 인간이므로 공책에 쓰는게 더 쉽게 이해된다.) 결과물 => main home이다. 영화 사이트에서 api이용 json형식으로 영화의 정보를 가져와 출력했다. 왼쪽 상단 작은 네이게이터 추가했다. 영화리스트들중 한 section 서머리의 내용이 길어서 리스트가 깨지는걸 방지하기위해 slice사용하여 180글자씩 잘라냈다. 영화 클릭시.. 2021. 5. 6. 이전 1 2 다음 728x90 반응형
