ref (refence)

ref (refence)

3초 후에 input 태그에 focus가 되게 ref 속성을 주었다.

import React, { useRef } from "react"; const App = () => { const test = useRef(); // test에는 ref를 설정해준 input 태그가 담깁니다. setTimeout(() => test.current.focus(), 3000); return ( <> Hello ); }; export default App;

from http://darrengwon.tistory.com/178 by ccl(A) rewrite - 2020-03-22 19:20:16

댓글

댓글 쓰기

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅) 안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다. 사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다. $ yarn create react-app build-test $ cd build-test $ yarn build 그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다. 프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로, 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다. 그리고, 기본적으로 yarn create react-app으로 프로젝트를 만들면 로고 이미지 파일이 포함되었죠? 그런 이미지, 사운드 같은 정적 파일이 있다면 해당 파일을 위한 경로도 생성됩니다. 실제로 저 static 폴더를 열어 보면, js, css로 나뉘어 수많은 자바스크립트 파일이 하나로 합쳐지고, css 파일들도 하나로 합쳐지게 됩니다. 이러한 작업을 해주는 것이, 리액트를 처음 사용할 때 만났던 웹팩이라는 것인데요. 웹팩 설정에서 Chunks 기능이 작동하여 여러 파일들을 따로 분리시켜 효율적으로 캐싱해 줍니다. 실제로 static을 열어보면 자주 바뀌는 코드, main 코드 등등이 알아서 나뉘어 효율적으로 분리되어 있을 것입니다. 이렇게 파일을 분리하는 작업을 '코드 스플리팅'이라고 합니다. 지금은 CRA(create-react-app)으로 만들어진 아주아주 작고 기본적인 코드만 빌드되었기 때문에 파일의 크기가 아주 작습니다만, 프로젝트의 규모가커지면 A페이지에서 B,C,D 페이지에서 사용할 정보까지 모두 로드하면서 파일 크기가 ...
자세한 내용 보기

리액트에서 이미지를 다루는 방법

리액트에서 이미지를 다루는 방법 CRA에선 어떻게 이미지를 처리하는가? 10KB미만의 이미지 파일은 data URI의 형태로 변환되어 html에 포함된다. url-loader가 이미지 파일을 만나면 data URI 형태로 변경해주기 때문에 가능한것이다. 이렇게 하면 http 요청수를 줄일 수 있고, bmp, gif, jpg, jpeg, png에만 적용되고 svg는 제외된다. 물론 10KB라는 수치도 변경이 가능하다고 한다. data URI란 간단히 말하면 작은 크기의 파일을 문서내에 인라인으로 포함하기 위해서 사용된다. 아이콘을 base64로 인코딩하여 data URI형태로 문서에 인라인 하는 방식을 많이 사용한다. SVG는 왜 제외 됬는가? 이슈 내용을 살펴보면 CRA가 버전 0.8로 업데이트 되면서 url-loader를 사용하여 10KB 미만의 이미지를 data uri형태로 처리하게 변경되었는데, 그것 때문에 원래 잘 쓰고 있던 본인의 svg sprite system이 망가졌다는 이슈이다. 이 사람이 원래 쓰고 있던 svg sprite system은 이렇게 동작한다. 한 폴더에 모여있는 SVG파일들이 빌드 후 10KB미만의 SVG 스프라이트 파일(sprite.svg)로 합쳐진다. 이 스프라이트에서 fragment identifiers를 통해 일부 아이콘만 가져와서 리액트 컴포넌트로 만들어서 사용중이었다고 한다. 이렇게 svg sprite를 이용할 경우 브라우저 캐시를 이용할 수 있어서 큰 장점이 있다. import React, { PropTypes } from 'react' import svgSprite from '../img/symbol/sprite.svg' function Icon({ name }) { return ( ) } 그런데, CRA가 10KB 미만의 svg의 fragment도 url-loader로 처리하여 base64로 인코딩되는 바람에, 아이콘을 제대로 불러오지 못하는 이슈가 발생한...
자세한 내용 보기

React에서 웹팩 설치하기

React에서 웹팩 설치하기 create-react-app을 하면 자동으로 웹팩 설정을 해주기 때문에 웹팩을 그다지 신경쓰지 않았지만 그래도 웹팩을 설치하는 방법을 알아야 한다. 세부적인 컨트롤과 개인화, 오류 수정 등의 문제가 존재하기 때문이다. 우선, 웹팩을 다루기 위해서는 node를 어느 정도 알아야 한다. React할 때 node를 알아야 한다는 이유가 웹팩을 활용하기 위해서이다. from http://darrengwon.tistory.com/177 by ccl(A) rewrite - 2020-03-21 05:20:13
자세한 내용 보기