DH의 개발 공부로그

리액트 절대경로 Vite와 타입스크립트 상황에서의 절대경로 설정을 하는 방법은 정리를 했었는데 create-react-app로 리액트 프로젝트를 생성을 했을 때 절대경로 설정 하는 방법을 알아보겠습니다. [Vite, TypeScript] Vite + 타입스크립트 환경에서 절대 경로 설정하기! jsconfig.json 우선 package.json 과 같은 위치에 jsconfig.json 파일을 생성해줍니다. 그리고 json 파일 내부에 아래와 같이 작성한다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그 후 다시 서버를 실행해주면, 기존의 방식인 상대경로가 아닌 절대경로로 설정할 수 있게 됩니다. // 상대경로 import Title ..

DOM 조작을 위한 ref 전달 리액트에서 ref를 가장 많이 사용하는 경우는 바로 DOM 엘리먼트를 참조하는 것입니다. 하지만 이 ref를 prop를 전달하는 경우, 일반적인 방법으로 되지 않습니다. import React, { useRef } from "react"; const MyInput = ({ ref }) => { return } const MyApp = () => { const inputref = useRef(null) return ( ) } export default MyApp 위의 코드처럼 ref를 전달하게 되면 경고 메시지가 뜨게 됩니다. Warning: Input: `ref` is not a prop. Trying to access it will result in `undefined`..

비밀번호 보기/숨기기 로그인 페이지에서 이제는 필수가 되어버린 기능인 입력하는 비밀번호를 보거나 숨기는 기능을 아주 간단하게 구현을 해보았습니다. 리액트로 작업을 했기 때문에 약간의 차이만 있을 뿐 자바스크립트 코드를 기반으로 하기 때문에 자바스크립트 환경에서도 구현이 가능합니다. 코드 구현 마크업 아래의 코드를 이용하여 위의 이미지처럼 작업을 하였고, 스타일은 module을 이용하여 작업을 했습니다. 해당 스타일 코드는 지금 상황에서 중요한 부분이 아니기 때문에 생략하겠습니다. function app () { const [userIdInput, setUserIdInput] = useState('') const [userPwInput, setUserPwInput] = useState(&#3..

드롭다운 메뉴 이번에는 위의 이미지에서 보이는 펼침/닫힘만 되는 간단한 드롭다운 메뉴를 작업해 보았습니다. onClick 이벤트와 useState를 활용하면 간단하고 쉽게 작업을 할 수 있습니다. 하지만 여기서 중요한 부분은 드롭다운 메뉴가 오픈 상태에서 다른 공간 또는 메뉴를 클릭하면 드롭다운이 닫혀야 한다는 것 입니다. 그러기 위해서는 onBlur 이벤트를 활용해야합니다. onBlur onBlur 이벤트는 엘리먼트 또는 자식 엘리먼트에서 포커스가 사라졌을 때 호출됩니다. console.log('blur!!')} 예를 들면 위의 input 바깥의 영역을 클릭해서 포커스카 아웃이 되면 콘솔 창에 'blur!!!'가 찍히게 됩니다. 코드구성 Container.jsx const ..

SVG 사용하기 리액트에서 SVG 파일을 사용하는 방법은 여러가지가 존재합니다. 가장 익숙한 방법으로는 img 태그 src 속성에 SVG 파일을 추가하는 방법이 있지만, 이 경우에는 SVG 파일의 장점을 십분 발휘하지 못합니다. img 태그로 불러오면 색깔이나 크기가 조금 다른 아이콘을 사용하기 위해서는 또 새로운 SVG 파일을 갖고 있어야 하기 때문입니다. 그렇다면 어떤 방법을 이용하여 SVG 파일을 불러오는 것을 추천하는 지는 아래에서 설명 드리겠습니다. SVG를 React 컴포넌트로 import하기 이 방법은 Create-React-App에서 가능한 방법이며, 위에 이미지처럼 img 태그를 사용하기 보다는 SVG 파일 자체를 컴포넌트로 사용하길 추천드립니다. 이 방법을 사용하면, 하나의 SVG 파일..

React-icons React-icons은 리액트 프로젝트 작업을 할 때 아이콘을 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 오늘은 이 React-icons을 적용해서 사용하는 방법을 알아보겠습니다. React-icons 설치 $ npm install react-icons --save 또는 $ yarn add react-icons사용 방법 1. 좌측 아이콘 목록 위의 이미지에서 보이듯이 리액트 아이콘 좌측 목록에서 원하는 아이콘이 있는 패키지를 고르거나, 직접 검색을 하면 됩니다. 2. 아이콘 선택 원하는 아이콘을 찾아서 클릭을 하면 자동으로 해당 아이콘의 이름이 복사가 됩니다. 3. import 아이콘 import { 아이콘이름 } from "react-icons/아이콘주소"; 복사한 아이콘..

서론 리액트로 작업을 하다 보면 console.log를 이용해서 작업을 확인 할 때가 있는데, 그때마다 콘솔 창에는 두 번씩 찍혀있습니다. 이 말은 렌더링이 두 번씩 된다는 것입니다. 그래서 항상 작업을 할 때마다 그 이유가 무엇일지 궁금했기 때문에 이번에 이렇게 정리하게 되었습니다. 두 번씩 찍히는 이유? 결론부터 설명을 드리면 바로 로 감싸져 있기 때문입니다. StrictMode? StrictMode란 리액트 공식 문서에 따르면 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이며, Fragment와 같이 UI를 렌더링하지 않고, 자손들에 대한 부가적인 검사와 경고를 활성화 한다고 합니다. 그리고 StrictMode는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. ..

문제 발견 이전의 작업을 했던 리액트 Set을 이용한 checkbox를 다루었던 코드에서 문제점이 있었습니다. [React] 리액트에서 Set 이용한 Checkbox 상태관리하기! 이전의 코드를 확인하고 싶으면 다음과 같습니다. 이전 소스코드 확인하기 문제점이 무엇인지 확인을 해보면, 우선 전체선택과 개별선택이 있는 체크박스의 기능들은 다음과 같아야 합니다. 개별 체크박스 선택/해제 기능 전체 선택을 클릭 시 전체 선택/해제 변경 기능 전체 선택 시에 하나라도 체크가 해제되면 전체 선택 박스 체크 해제 모든 체크박스가 선택될 경우 전체 선택 박스 체크 활성화 이렇게 4가지의 경우가 충족이 되어야 합니다. 하지만 위의 코드에서 1번과 2번의 조건은 충족이 되지만, 3번과 4번의 기능들은 충족하지 못하는 문..