[React] react .env 사용법 (+ 적용안될 때)
2023. 5. 2. 20:30
프로그래밍/React
.env 사용 방법 1. 프로젝트 경로에 파일 생성 프로젝트 우클릭하여 파일 생성 src 폴더와 같은 위치 2. 환경변수 설정 설정 시 REACT_APP_KEY 를 앞에 꼭 써줘야 함 3. 사용하기 원하는 위치에 가져와서 사용하기 추가적으로 .env 파일을 잘 설정해서 사용하려고 하는데 적용이 안되는 경우 👉 서버 재시작을 해주자!
[React Error] warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. 해결 방법
2023. 4. 28. 20:00
프로그래밍/React
warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. 발생 원인 form 필드에 value를 사용하면서 onChange 핸들러를 설정하지 않아 발생하는 에러 나의 경우 disabled 옵션을 설정하면서 onChange 옵션을 제거해서 에러가 발생했음 해결 방법 onChange 핸들러를 설정하거나 defaultValue 설정을 해주거나 readOnly 옵션 추가해라라는 힌트..
[React] 업데이트 될때만 useEffect 실행
2023. 4. 25. 20:04
프로그래밍/React
component 업데이트 시에만 useEffect 작동 클래스형에서 사용하던 componentDidUpdate를 사용하고 싶다면 어떻게 해야할까? useEffect는 componentDidMount와 componentDidMount+componentDidUpdate 기능을 제공함 여기서 componentDidUpdate만 사용하고 싶다면 조건을 걸어 update 시에만 useEffect가 작동하도록 하면 됨 간단한 예시 const mounted = useRef(false); useEffect(() => { if(!mounted.current) { mounted.current = true; } else { // startDate 변경시 작업내용 } }, [startDate]);
[React] crypto-js 암호화 복호화 방법
2023. 4. 24. 20:33
프로그래밍/React
crypto-js 사용 방법 crypto-jo 설치 npm install crypto-js # npm 혹은 yarn을 사용하여 설치 yarn add crypto-js 암호화 복호화하기 암호화 키는 .env로 빼거나 다른 파일에 두고 사용하는 것을 권장 값이 없는 경우 빈 문자열 처리나 에러 로깅을 위한 try~ catch 문은 선택적으로 사용하기 import CryptoJS from 'crypto-js'; import {AES_SALT} from "./constants"; /* Salt 비밀 키 */ const salt = '암호화 키'; /* 암호화 */ export const encrypt = (text) => { // 값이 없을 경우 빈 문자열 반환 if (!text) return ''; retur..
[React] reactToPrint - React Component 프린트 및 PDF 저장
2023. 4. 18. 20:31
프로그래밍/React
react-to-print react component 인쇄와 pdf 저장 기능 제공 설치 방법 # npm install npm i react-to-print # yarn install yarn add react-to-print props props는 다양하지만 내가 사용한 2가지 props만 설명할 것임 사용가능한 props는 npm 공식 문서에서 확인 가능 Name Type 설명 contnet function 구성요소 참조 값을 반환하는 함수 이 참조 값의 내용을 인쇄 documentTitle String 파일로 저장할 때 인쇄할 제목 설정 사용 방법(함수형 컴포넌트) 1. import useReactToPrint 하기 import {useReactToPrint} from 'react-to-print..
[React] 조건부 렌더링 2
2023. 4. 13. 20:58
프로그래밍/React
리액트 조건부 렌더링 간단한 예시와 설명 이전에 삼항 연산자처럼 작동하는 조건부 렌더링에 대해 적어보았음 간단하게 정리하자면 값이 true인지 false인지 여부에 따라 렌더링을 다르게 했음 이러한 조건부 렌더링은 로그인인지 아닌지에 따라 로그인, 로그아웃 버튼을 보여주고 싶은 경우 사용 가능함 그렇다면 조건이 참일때만 작동하고 false인 경우 렌더링하고 싶은 내용이 없다면? 예시 import React from 'react'; function App() { // 생략... return ( {type === 2 && ( Welcome ) ); } 어떤 타입이 있어서 type이 2인 경우에만 Welcome을 렌더링 하고 싶은 경우 && 으로 작성해주면 됨
[React] 조건부 렌더링 1
2023. 3. 31. 22:44
프로그래밍/React
리액트 조건부 렌더링 간단한 예시와 설명 예시 import React from 'react'; function App() { const isLoggedIn = true; return ( {isLoggedIn ? ( Welcome back, user! ) : ( Please log in to continue. )} ); } 이 코드에서는 isLoggedIn 변수를 사용하여 현재 사용자가 로그인되어 있는지 여부를 나타내고 있음 이 변수를 기반으로, 조건부 렌더링을 사용하여 다른 UI를 렌더링함 isLoggedIn이 true인 경우 Welcome back, user!를, false인 경우 Please log in to continue.를 렌더링함 조건부 렌더링은 애플리케이션의 상태를 기반으로 UI를 동적으로 ..
[React] React, React Native 빌드 실패 시
2023. 3. 13. 20:23
프로그래밍/React
프로젝트를 clone 받거나 pull 받아서 빌드할 때 실패하는 경우 모듈 install 하기(react, react native) npm install을 해주면 프로젝트 내에 설치 안되어있는 모듈들만 받기 때문에 마음놓고 해도 괜찮음 npm install # or npm i 시뮬레이터와 연결하기(react native) 시뮬레이터와 연결이 안되어 있는 경우 연결을 해주자