DH의 개발 공부로그 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/아이콘주소"; 복사한 아이콘..

Children Props? 리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다. children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다. 예를 들면, function App() { return Hello world! } 이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다. function Welcome(props) { return {props.children}; } Children Props Type 타입스크립트에서는 Children Props를 전달을 할 때 타입을 지정을 해주어야 합니다. 그렇다면 어떤 타입으로 지정을 해주어야 하는지 알아보겠습니다. 1. JSX.Element..

FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입입니다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입입니다. React.FC 사용 타입스크립트를 이용해서 리액트로 작업을 하다보면 아래의 형태로 작업을 하는 경우가 많습니다. import React from 'react'; type GreetingsProps = { name: string; }; const Greetings: React.FC = ({ name }) => ( Hello, {name} ); export default Greetings; React.FC를 사용하는 경우에는 다음과 같이 props의 타입을 Generics으로 넣어서 사..