본문 바로가기
반응형

개발/React176

React Material - 파일 검색 후 Tree View 포커싱 (Focus Tree View with useRef) 리액트 전체 링크 참고 - useRef로 특정 위치로 포커스 이동하기 - Auto Complete로 목록 관리하기 - 파일 브라우저에 검색 기능 추가하기 - 파일 검색 후 Tree View 포커싱 파일을 검색해서 expand와 select가 정상적으로 동작했지만, 스크롤보다 아래에 있는 파일의 경우 포커싱이 되지 않는다. 이런 경우, useRef로 특정 위치로 포커스 이동하면 된다. 모든 TreeItem에 ref를 설정해야하므로 배열로 선언하였다. const treeFocus = useRef([]); TreeItem에 nodeId로 treeFocus의 current를 설정한다. const makeTreeItem = (info, parent) => { if (info.child === undefined) .. 2023. 6. 19.
React Material - 파일 브라우저에 검색 기능 추가하기 (Add Search Files with Autocomplete at File Browser) 리액트 전체 링크 참고 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui 파일, 폴더 뷰 확장 / 선택하기 - 파일 브라우저에서 폴더 이벤트 추가하기 - Auto Complete로 목록 관리하기 - 파일 브라우저에 검색 기능 추가하기 현재까지 만든 파일 브라우저에 Material UI의 Autocomplete으로 파일 검색 기능을 구현해보자. 참고로 더 많은 파일이 잘 검색되는 지 확인하기 위해 여러 파일을 더 추가하였다. 트리 뷰 확장 기능 추가하기 먼저 트리 뷰의 확장 기능을 추가해보자. 검색이 되면 트리 뷰도 펼쳐지면서 해당 파일이나 폴더가 선택되어야 하기 때문이다. Mui 파일, 폴더 뷰 확장 / 선택하.. 2023. 6. 19.
React Material - Auto Complete로 목록 관리하기 (Show Autocomplete Drop-Down List) 리액트 전체 링크 참고 - mui autocomplete 위의 링크를 참고하여 아래의 예시에서 시작한다. import React, { useState } from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; import Stack from "@mui/material/Stack"; const top100Films = [ { title: "The Shawshank Redemption", year: 1994 }, ... { title: "Monty Python and the Holy Grail", year: 1975 }, ]; const MyAutoCom.. 2023. 6. 18.
리액트 - useEffect로 useState 콜백 함수 만들기 (How to Make Callback after useState Hook in React) 리액트 전체 링크 useState의 setState 함수가 사용된 후, 콜백 함수가 호출되도록 해보자. 먼저, input에 입력을 하면 입력된 값을 콘솔 로그로 출력하는 코드를 작성해보자. import { useState } from "react"; function App() { const [number, setNumber] = useState(""); const handleChange = (e) => { setNumber(e.target.value); console.log(number); }; return ( handleChange(e.target.value)} /> ); } export default App; 콘솔 창에는 입력된 값보다 이전 값이 출력되는 것을 알 수 있다. useState가 비동기 .. 2023. 6. 17.
리액트 - ㄱ 한자 1 특수 문자로 공백 추가하여 띄어쓰기 리액트 전체 링크 참고 - pre 태그로 입력한 그대로 보여주기 리액트, HTML에서 공백 문자를 삽입하거나 추가해서 스페이스 바를 입력한 효과인 띄어쓰기를 해보자. 아래의 코드를 실행해보자. function App() { return ( 1 2 3 4 5 6 ); } export default App; 예상과 달리 스페이스 바 " "(빈칸)가 처리되지 않는다. 여러 가지 방법으로 space bar를 보이도록 처리할 수 있지만, 아주 간단한 방법은 ㄱ 한자 1 특수 문자를 이용하는 것이다. ㄱ을 입력하고 한자 키를 누르면 아래와 같이 1번에 빈 문자가 존재한다. 위 문자를 스페이스 바 대신 사용하자. function App() { return ( 1 2 3 4 5 6 ); } export default .. 2023. 6. 17.
리액트 CSS - Input 태그 감추기 (How to Hide Input Tag) 리액트 전체 링크 참고- useRef로 특정 위치로 포커스 이동하기 (Use Ref Hook Focus) style={{ display: "block", height: 0, width: 0, border: 0, padding: 0 }}vs type="hidden" 비교 아래의 코드를 실행해보자.function App() { return ( hello );}export default App; input 아래에 hello가 만들어진다. input 태그를 숨기기 위해 height와 width를 0으로 만들어보자.function App() { return ( hello );}export default App; 높이와 너비가 0이라도 아래.. 2023. 6. 17.
리액트 - useRef로 특정 위치로 포커스 이동하기 (Use Ref Hook Focus) 리액트 전체 링크 focus test 버튼을 누르면 input으로 이동해서 포커싱이 되도록 해보자. 아래의 코드로 시작한다. import { useState, useEffect } from "react"; function App() { const [temp, setTemp] = useState([]); useEffect(() => { let t = []; for (let i = 0; i ( {item}번째 p tag ))} ); } export default App; focus test 버튼을 누르면 맨 아래의 input으로 이동하도록 해보자. us.. 2023. 6. 17.
React Material - withStyles로 TreeView css 커스터마이징 하기 (Customize TreeView css Style using withStyles) 리액트 전체 링크 참고 - mui tree view css - Mui Tree View로 파일, 폴더 뷰 만들기 TreeView의 css 스타일을 변경해보자. 현재 코드는 아래와 같다. import React from "react"; import TreeView from "@mui/lab/TreeView"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import TreeItem from "@mui/lab/TreeItem"; const TreeViewExample = () => { return ( console.log(e.ta.. 2023. 6. 14.
React Material - 파일 브라우저에서 폴더 이벤트 추가하기 (Folder Click Event in File Browser) 리액트 전체 링크 참고 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui 파일, 폴더 뷰 확장 / 선택하기 - Mui로 파일 브라우저 만들기 - 파일 브라우저에서 파일 다운로드하기 - 파일 브라우저 정렬하기 - 파일 브라우저에서 폴더 이벤트 추가하기 이전 글에서 파일을 클릭하면 파일이 다운로드 되었다. 이번에는 폴더를 클릭했을 때, 파일 브라우저를 해당 폴더 내의 파일과 폴더로 변경해보자. 즉, 파일 / 폴더 뷰와 브라우저를 연동해보자. nodeId와 경로 mapping 예를 들어 D:/github/globfiles/def1 경로를 선택했다고 하자. 그러면 expaned에는 최소 4개 = [D:, D:/gith.. 2023. 6. 12.
반응형

티스토리툴바