18버전의 새로운 hook 이 추가 됐다. 공식문서에 따르면, 수화 불일치를 피하면서 서버와 클라이언트에서 안정적인 고유 ID를 생성하기 위한 후크입니다. 토큰 을 포함하는 문자열을 생성하고, 이렇게 하면 토큰이 고유한지 확인하는 데 도움이 되지만 CSS 선택기와 같은 API에서는 지원되지 않습니다. useId 언제 사용 할까? 입력이 있는 레이블과 같이 두 개의 HTML 요소를 함께 연결하는 데 사용합니다. 매번 고유 ID를 생성해야 하는 곳에 사용하세요. 동일한 생성 ID를 여러 번 사용하려면 접두사 또는 접미사를 사용하세요. 사용하면 안될 때 useId CSS 선택기 에 후크를 사용하지 마십시오. 목록의 키에 사용하지 마십시오. 변경해서는 안 되는 값에는 사용하지 마십시오. 사용법은 간단하다 기존 ..

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. HOC는 리액트에서 컴포넌트 로직 재사용을 위해 사용하는 고급 기술입니다. HOC는 React API의 일부가 아니며, 단지 리액트의 집합 특성에서 나온 패턴입니..

SEO (Search Engin Optimiztion) 검색 엔진 최적화. 네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정. 검색을 하면, 검색 엔진이 내 사이트 내용물(meta tag나 html 등)을 훑어가고 내용물에 특정한 인덱스 같은 것을 만들어 검색 결과에 보여준다. 검색 엔진 최적화는 검색엔진이 내 사이트를 크롤링할 때 정보를 더 잘 가져갈 수 있도록 도와주는 과정이기도 하다. yarn add react-snap Package.json dependency에 아래 항목 추가 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "re..

입력 시간을 받아 카운트 다운을 해주는 함수다. moment 라이브러리를 사용해 구현하였음! const countDownTimer = useCallback((date) => { let _vDate = moment(date); let _second = 1000; let _minute = _second * 60; let _hour = _minute * 60; let _day = _hour * 24; let timer; function showRemaining() { try { let now = moment(); let distDt = _vDate - now; if (distDt < 0) { clearInterval(timer); let HapDate = '0' + 'd ' + '0' + 'h ' + '0' ..

React 애플리케이션에서 환경 변수를 설정하고 사용하는 방법은 Create React App, Next.js 등의 프레임워크를 사용하고 있다면, dotenv 모듈을 직접 사용하지 않고도 환경 변수를 사용할 수 있습니다. React에서 환경 변수를 설정하려면, 프로젝트 루트에 .env 파일을 만들고, 그 안에 REACT_APP_ 접두사로 시작하는 환경 변수를 설정하면 됩니다. REACT_APP_API_URL=https://myapi.com REACT_APP_SECRET=mysecretkey 그런 다음 애플리케이션에서 process.env.REACT_APP_API_URL 또는 process.env.REACT_APP_SECRET와 같이 접근할 수 있습니다. console.log(process.env.REAC..

웹서비스를 하면서 다국어를 지원해야 하는 경우가 있다. 접속하는 국가 또는 지역에 따라서 다른 언어가 자동으로 지원되거나, 웹사이트에서 내에서 언어를 변경하는 기능이 제공 되기도 한다. react-i18next react-i18next는 React와 React Native 에서 사용할 수 있는 국제화 프레임 워크이다. 설치 방법 npm install react-i18next i18next — save react-i18next는 react와 함께 사용할 수 있는 기능을 제공하고, i18next는 다국어 핵심 기능을 제공한다. 사용 방법 다국어 기능을 사용하기 위해서는 i18n 모듈을 임포트 하고 지원하고자 하는 언어별로 리소스를 추가하고 i18n 옵션 설정과 함께 초기화 시켜주면 된다. //i18n.js ..