Web/React12 [React] i18n으로 다국어 지원하기 (i18next, react-i18next) 프로젝트에서 다국어 지원 기능을 적용하게 되었다. 나는 다른 분이 만들어 놓은 것을 적용만 했지만 해당 라이브러리를 어떻게 사용하는지 궁금해서 알아보기로 했다. 처음에는 브라우저에서 지원하는 한영변환인줄 알았는데, 그냥 서비스 안에서 따로 구현된 것이었음,, 그래서 제공될 다국어도 json으로 직접 작성해야 한다! 프로젝트에서는 라이브러리 i18n 을 사용했다. Introduction - react-i18next documentation Hello {{name}} , you have {{count}} unread message(s). Go to messages. react.i18next.com i18next 라는 라이브러리와 이를 react에서 아주 쉽게 사용하도록 만들어진 react-i18next를 설.. 2023. 10. 22. React를 위한 상태관리 라이브러리 - Recoil https://recoiljs.org/ko/docs/introduction/installation 설치 | Recoil NPM recoiljs.org Recoil? 2020년에 Facebook에서 발표한, React 전용 상태관리 라이브러리이다. Recoil을 통한 상태관리는 아주 간결하다는 장점이 있다. Redux의 경우 Flux 패턴을 사용하여 안정적으로 상태관리가 가능하지만, React 전용 라이브러리가 아니다. 초기 세팅이 요구된다. 비동기 데이터를 사용하려면 추가적인 라이브러리 설치가 필요하다. 많은 양의 **보일러플레이트 코드를 작성해야 한다. 는 단점을 가지고 있기도 하다. Recoil은 이러한 단점을 보완한다. ** Boilerplate Code : 변화 없이 여러 군데에서 반복되는 코드 .. 2023. 9. 12. [React] React Query [공식문서] https://tanstack.com/query/latest TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com Tanstack Query 강력한 비동기 상태 라이브러리 서버에 있는 데이터를 가져와서 보여주는 경우, 네트워크의 데이터를 가져와서 상태관리를 할 수 있게 해주는 라이브러리 커스텀 훅의 문제점 2가지 1. cache가 되지 않는 문제 - 훅을 호출할 때마다 새롭게 데이터를 받아옴.. 2023. 1. 18. [React] Redux Redux : props 없이 state를 공유할 수 있게 도와주는 라이브러리 store에 데이터를 저장해두고 모든 컴포넌트가 꺼내 쓸 수 있게 함 Vue.js의 store랑 같은 친구인듯,,,ㅎ Redux 설치 ※ 설치 전 package.json 파일에서 'react', 'react-dom' 항목의 버전 확인 필요 => 18.1.X 미만의 버전이라면 사용 불가능!! // 18.1.X 미만의 버전인 경우 더보기 package.json 파일의 'react', 'react-dom' 항목을 다음과 같이 수정하고, 터미널에서 npm install 실행 프로젝트 터미널 열어서, $ npm install @reduxjs/toolkit react-redux Redux 셋팅 1. store.js 파일 생성 src/st.. 2022. 12. 19. [React] ajax AJAX : 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능 => 실습에서는 axios 사용 설치 npm install axios 버튼을 눌러서 GET 요청 보내기 import axios from 'axios' { axios.get('url 주소!') .then((res)=>{ // 요청 성공 시 실행되는 함수 }) // 요청 실패 시 실행되는 함수 .catch((err)=>{console.log(err)}) }}>더보기 POST 요청 보내기 axios.post('URL', { 딕셔너리 데이터 }) .then((res)=>{ // 요청 성공 시 실행될 코드 }) .catch(()=>{ // 요청 실패 시 실행될 코드 }) 동시에 AJAX 여러개 Pr.. 2022. 12. 15. [React] Lifecycle 컴포넌트 Lifecycle 1. mount (생성) 2. update (재랜더링) 3. unmount (삭제) React에서 Lifecycle hook 쓰는 법 useEffect 안의 함수는 mount, update될 때 실행됨 useEffect 안의 함수는 html 렌더링 이후에 동작 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 }); return (생략) } useEffect를 사용하는 경우 오래걸리는 반복 연산 서버에서 데이터 가져오는 작업 타이머 사용 시 useEffect 실행조건 설정하기 [ ] 안에 있는 변수나 state가 변경 될때 useE.. 2022. 12. 15. [React] - Router 1 react-router-dom 설치 $ npm install react-router-dom@6 setting // index.js import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 라우터로 페이지 나누기 // App.js import { Routes, Route, Link } from 'react-router-dom' function App(){ return ( (...생략) ) } (맛없는) 페이지 이동 버튼 Home Detail (맛있는) 페이지 이동 기능 - useNavigate() import { ...생략 , .. 2022. 12. 13. [React] 블로그 제작 4 - input 에 입력된 값 가져오기 // 이벤트 핸들러 부착 후, 현재 입력된 값 출력하기 { console.log(e.target.value) }}/> 주로 변수 명은 e로 사용함 e.target : 현재 이벤트가 발생한 곳 알려줌 e.preventDefault() : 이벤트 기본 동작 막아주기 e.stopPropagation() : 이벤트 버블링 막아주기 (이벤트가 상위 div로 퍼지는 현상) 사용자가 input에 입력한 데이터 저장하기 state 하나 생성해주고 이벤트가 발생할 때마다 e.target.value를 state에 갱신 function App (){ let [입력값, 입력값변경] = useState(''); return ( { 입력값변경(e.target.value) console.log(입력값) }}.. 2022. 12. 7. [React] 블로그 제작 3 - map, props JSX 안에서 html 반복 생성? 1. map 함수 사용 function App() { let [titles, f] = useState(['크로스핏 컴백한 날', '운동하는데 첫 눈 왔당', '서울 가야하는 이유 + 1']); // 버튼 클릭시 좋아요 +1 => 자주 변경될 것이기 때문에 state 사용 let [likes, plus] = useState([0, 0, 0]); return ( (생략...) { // i는 0부터 1씩 증가하는 수 titles.map((title, i)=>{ return ( { title } { let likes_copy = [...likes]; likes_copy[i] += 1; plus(likes_copy) }}>👍 { likes[i] } 11월 30일 작성됨 ) }).. 2022. 12. 7. [React] 블로그 제작 2 - 동적인 UI, 삼항연산자 동적인 UI 만들기 - 사용자가 조작 시 형태가 바뀌는 UI 동적인 UI 만드는 3단계! 1. html, css로 미리 UI를 만들기 2. UI의 현재 상태를 state로 저장 3. state에 따라서 UI가 어떻게 보일지 코드 작성 예시) 모달창 띄우기 1. html, css로 미리 UI를 만들기 // App.js function Modal() { return ( 제목 날짜 상세 내용 ) } // App.css .modal { margin-top: 20px; padding : 20px; background : #eee; text-align: left; } 2. 현재 상태 저장 // UI의 현재 상태 let [modal, setModal] = useState(false); 3. state에 따라서 UI가.. 2022. 12. 7. 이전 1 2 다음
