본문 바로가기
반응형

개발/React176

React Material - 버튼 색깔, 아웃라인 변경하기 (Change Mui Button Color on Hover) 리액트 전체 링크 참고 - 예제 확인 링크 - mui react button - mui react palette Material의 팔레트를 보면 기본 색상은 다음과 같다. 버튼의 종류(variant)는 크게 text, contained, outlined로 나뉜다. import React from "react"; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; const ButtonTest = () => { return ( Primary Secondary Error Warning Info Success Primary Secondary Error Warning Info Success Primary Secon.. 2023. 4. 7.
리액트 - WebGL로 빌드된 유니티 전체 화면으로 변경하기 (Entering Fullscreen Unity WebGL in React) 리액트 전체 링크 Unity 전체 링크 참고 - 리액트에서 Unity 오브젝트 컨트롤하기 - Unity에서 리액트로 이벤트 호출하기 Unity에서 리액트로 이벤트 호출하기에서 코드를 추가 전체 화면이 되도록 하는 코드를 추가하자. useUnityContext에서 requestFullscreen을 추가한다. const { unityProvider, sendMessage, // unity 함수를 호출하기 위한 sendMessage 추가 addEventListener, // unity -> react 통신 removeEventListener, // unity -> react 통신 requestFullscreen, // 전체 화면 UNSAFE__detachAndUnloadImmediate: detachAndUn.. 2023. 3. 25.
리액트 CSS - 배경 이미지 꽉 채우기 리액트 전체 링크 css에서 배경 이미지를 설정해보자. 배경이미지는 src > image 폴더에 추가하였다. App.css에 body 태그를 아래와 같이 설정해보자. background-image: url을 이용하여 이미지를 불러오면 된다. body { background-image: url(./image/background.png); } 아무런 설정도 없다면 아래와 같이 이미지가 반복된다. background-repeat에서 no-repeat을 설정하면 이미지를 하나만 나오게 한다. body { background-image: url(./image/background.png); background-repeat: no-repeat; } 이제 background-position에 top center를 추가.. 2022. 6. 19.
리액트 - 같은 Link를 클릭해도 새로고침 되도록 하기 (리액트 라우터 useLocation) 리액트 전체 링크 아래와 같이 로그인(리액트 라우터의 현재 링크 = http://localhost:3xxx/login)이 있다고 가정하자. 로그인 아이디를 입력한 상태에서 로그인 링크를 누르면 현재의 라우터이기 때문에 새로고침이 발생하지 않는다. 해결 방법은 react router의 useLocation과 useEffect를 이용하여 강제로 새로고침하도록 한다. useLocation은 현재 페이지에 대한 정보를 알려준다. import { Route, Link, Routes, useLocation } from "react-router-dom"; ... let currentPath = ""; function App() { let location = useLocation(); useEffect(() => { .. 2022. 3. 27.
리액트 - jsconfig.json로 component import 자동완성 리액트 전체 링크 아래와 같은 컴포넌트가 있다고 하자. import React from 'react'; const AutoComplete = () => { return ( ); }; export default AutoComplete; App.js에서 auto를 입력하여도 자동완성이 나오지 않는다. 아래처럼 AutoComplete.js가 열려있다면, auto만 입력해도 자동으로 컴포넌트를 불러온다. jsconfig.json을 만들어 설정을 추가하면 파일을 열지 않아도 자동으로 import 할 수 있다. 먼저 src > jsconfig.json 파일을 만든다. Ctrl + Shift를 눌러서 나오는 내용을 입력하거나 아래의 코드를 추가한다. { "compilerOptions": { "target": "es6.. 2022. 3. 24.
리액트 - useRef를 이용하여 타이머 만들기 리액트 전체 링크 로컬 변수를 사용할 때 useRef를 활용할 수 있다. useRef는 current 속성을 가지고 있고 이 값을 변경해도 컴포넌트가 렌더링되지 않는다. Timer component에서 시간, 분, 초를 입력받는다고 가정하자. count할 시간은 시간에 3600, 분에 60을 곱한 후 나온 결과를 초와 함께 더한다. 그리고 setInterval를 담을 interval도 useRef로 선언한다. const Timer = ({ hh, mm, ss }) => { const HH = hh ? parseInt(hh) : 0; const MM = mm ? parseInt(mm) : 0; const SS = ss ? parseInt(ss) : 0; const count = useRef(HH * 60 .. 2022. 3. 23.
로그인 폼 만들기 - useReducer로 Input 관리 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 로그인을 하기 위해 ID와 비밀번호를 입력한다. useState를 이용해서 loginID와 loginPassword를 이용하였다. const [loginID, setLoginID] = useState(""); const [loginPassword, setLoginPassword] = useState(""); 만약 필요한 input이 늘어난다면 관리해야 할 useState가 input의 개수만큼 늘어난다. useReducer를 이용하면 간편하게 input을 관리할 수 있다. useReducer를 import한다. import React,.. 2022. 3. 20.
리액트 package.json에서 port 변경 리액트 전체 링크 package.json에서 scripts에 아래와 같이 변경하면 npm run start를 할 경우 설정된 포트로 접속된다. "scripts": { "start": "set PORT=3003 && react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 2022. 3. 18.
로그인 폼 만들기 - Caps Lock 감지 리액트 전체 링크 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 비밀번호를 입력할 때, Caps Lock을 감지할 수 있으면, 비밀번호가 틀리는 것을 어느 정도 피할 수 있다. 여기서는 ID, Password에서 입력을 할 경우 Caps Lock을 감지하도록 하자. capsLockFlag에 따라 className과 Caps Lock On/Off로 변경되도록 한다. {capsLockFlag ? "Caps Lock On" : "Caps Lock Off"} caps lock 감지를 위한 flag를 useState로 선언한다. 위의 span에서 사용하기 위한 값이다. const [caps.. 2022. 3. 14.
반응형

티스토리툴바