목록React (63)

혼자 적어보는 노트

[React] useRef() 여러 개 한번에 관리하기

useRef()는 따로따로 하나씩만 선언해서 사용했었는데 검색을 하다 우연히 여러개를 지정해서 관리할 수 있다는 것을 알게되었다. const inputRef = useRef({}); 초기값에 빈 객체를 넣어준 후 아래와 같이 ref를 설정하면 해당 요소가 객체에 담기게 된다. (inputRef.current["text"] = el)} /> (inputRef.current["email"] = el)} /> 인덱스를 이용하여 배열처럼도 저장 가능하다. const listRef = useRef([]); {posts.map((post, index) => ( (listRef.current[index] = el)}> {post.content} ))}
React 2022. 3. 11. 00:16
더미데이터(dummy data) 만들기 / 더미 이미지 사이트

여러개의 더미데이터 생성 방법 import React, { useEffect, useState } from "react"; import PostListItem from "./PostListItem"; import faker from "faker"; import { nanoid } from "nanoid"; const PostList = () => { const [postData, setPostData] = useState({ posts: [], loadPosts: false, }); const dummyPosts = (number) => { return Array(number) .fill() .map(() => ({ id: nanoid(), content: faker.lorem.paragraph(), i..
React 2022. 3. 10. 08:58
[React] create-react-app 없이 react 개발환경 세팅 해보기

리액트로 무언가를 만들 때 늘 CRA(create-react-app)을 사용하여 개발환경을 구축했었는데 궁금증이 생겨서 CRA없이 환경을 구축해보고 싶었다. 몇가지 검색을 해서 블로그 글을 보며 해보긴 했는데 특히나 웹팩 부분에서 각각 다르게 세팅을 해놓아서 뭐가 뭔지 이해하기가 어려웠다. 하나씩 이해를 하며 정리를 해보기로 했다. 폴더 및 package.json 생성 프로젝트 폴더를 생성하고 package.json 파일을 만들기 위한 초기화를 진행한다 npm init -y npm init -y 를 사용하면 default값으로 설정 된 pacage.json파일을 생성할 수 있다. 프로젝트 파일 안에 src, dist, public폴더를 생성한다. src : React로 작업할 폴더 dist : 번들링 결..
React 2022. 3. 9. 16:03
[React] 정규표현식을 이용하여 텍스트 안에서 해시태그 분리하기

부모 컴포넌트에서 아래와 같이 텍스트를 전달하는 컴포넌트를 만든다 const textData = '정규표현식 #리액트 #react #정규표현식' //ex [TextContent.js] const TextContent = ({ textData }) => ( // '정규표현식 #리액트 #react #정규표현식' {textData.split(/(#[^\s#]+)/g).map((item) => { //split에서는 ()를 써야함 if (item.match(/(#[^\s#]+)/)) { return ( {item} ); } return v; })} ); const textData = '정규표현식 #리액트 #react #정규표현식' 1. textData.split(/(#[^\s#]+)/g) /#[^\s#]+/g ..
React 2022. 3. 6. 10:58
[React] styled-component

styled-components styled-components는 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 스타일을 바로 삽입하는 CSS in JS 라이브러리 중 하나이다. 개인적으로 css파일을 따로 작성하는 것을 선호하기 때문에 사용을 잘 안했으나 알고는 있어야 할 듯 하여 간단하게 정리를 하였다. 설치 npm i styled-components 사용 시 import import styled from "styled-components"; 일반 태그에 적용하는 법 적용 전 const App = () => { return ( Styled-components ); }; 적용 후 const MainBox = styled.div` padding: 10px; font-size: 16px; `;..
React 2022. 3. 6. 09:14
[React] input type="file" 커스터마이징 하기

이미지 업로드 버튼을 만드려면 input 태그에 type="file"을 주어야하는데 type file의 경우 브라우저에서 지정한 UI로만 사용이 가능해서 CSS수정이 불가능하다. css를 변경할 수 없으니 다른 방법으로 input태그를 숨겨놓고 커스터마이징 할 버튼을 추가하여 css를 수정하는 방식으로 해결을 할 수 있다. import React, { useRef } from "react"; const imageRef = useRef(); const onImageUploadClick = () => { imageRef.current.click(); } // .. 생략 // 버튼영역 // 실제 이미지 버튼 이미지 업로드 // 커스터마이징 버튼 file input을 hidden으로 숨기고 useRef를 사용하..
React 2022. 3. 3. 07:54
[React] 영역 밖 클릭시 이벤트 / 모달 닫기

영역 밖 클릭 시 이벤트 발생되는 것들을 몇차례 했었는데 이번에는 모달 컴포넌트의 바깥 영역을 클릭할 경우 해당 모달이 닫히는 것을 구현해보려한다. const modalRef = useRef(); const [profileModal, setProfileModal] = useState(false); const handleCloseModal = (e) => { if (profileModal && !modalRef.current.contains(e.target)) { setProfileModal(false); } }; useEffect(() => { window.addEventListener("click", handleCloseModal); return () => { window.removeEventListe..
React 2022. 2. 24. 05:10
[React] 활성화된 input focus 해제 / blur()

input을 핸들링 하면서 엔터 입력 등 어떠한 이벤트 이후 데이터 처리가 되면서 focus를 해제하고 싶을 때가 있다. 1. event.target을 이용한 fucus해제 const onKeyDown = (event) => { if (event.key === "Enter") { // 데이터 처리 코드 작성 event.target.blur(); } }; return ( ) 20 useRef를 이용한 focus해제 const inputRef = useRef(); const onKeyDown = (event) => { if (event.key === "Enter") { // 데이터 처리 코드 작성 inputRef.current.blur(); } }; return ( ) 3. 전역객체인 document에서 강..
React 2022. 1. 17. 13:25
Prev 1 2 3 4 5 ··· 8 Next