React 12건
[Material UI] It looks like there are several instances of `@material-ui/styles` initialized in this application. 경고 메시지 없애기
Material UI 쓰고 있는데 콘솔 창에 다음과 같은 경고 메시지가 떴다. (갑자기 이런 거 뜨면 신경쓰인다고...) 경고 메시지 It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason. See https://material-ui.com/r/styles-instance-warning for more info. 대략 @material-ui/..
React Router로 쿼리 스트링 값 가져오기
React Router로 쿼리 스트링 값 가져오기 예제 코드 import React from "react"; import { BrowserRouter as Router, Link, useLocation } from "react-router-dom"; // React Router does not have any opinions about // how you should parse URL query strings. // // If you use simple key=value query strings and // you do not need to support IE 11, you can use // the browser's built-in URLSearchParams API. // // If your quer..
리액트 DOM 안에 html 넣기 (dangerouslySetInnerHTML)
리액트에서 보안을 위해서 기본적으로 html 태그를 텍스트 형태로 출력해준다. 만약 리액트에서 html 코드를 DOM안에 출력하고 싶다면 innerHTML 대신 다음과 같이 dangerouslySetInnerHTML를 사용한다. 이때 출력하려는 html 코드는 __html 객체로 전달한다. (보안상 추천하는 방법은 아님. 가능하다면 가급적 다른 더 안전한 방식을 사용할 것.) function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } [출처] : 리액트 공식문서 ko.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml DOM 엘리먼트 ..
리액트 Component를 String 이름으로 동적 생성하기
입력받은 props에 따라 동적으로 리액트Component를 바꾸고 싶어서 알아보았습니다. 동일한 질문이 다행히 스택오버플로우에 있어서 답을 구할 수 있었습니다. 몇가지 방법이 있는데 @gmfvpereira의 답변이 아무래도 리액트 공식 문서에서 알려주는 방식이라서 제일 맘에 듭니다. 문자열로 React Component 생성하기 아래는 string에 따라서 그에 맞는 component로 변환하는 방법 예시입니다. 잘못된 방법 import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(pr..
리액트 useLayoutEffect 훅으로 화면 깜빡임 없애기
리액트에서 useEffect 훅을 이용해서 특정 문자열을 컴포넌트로 대체하게끔 만들었더니 화면 깜빡임이 발생했습니다. 알고보니 이렇게 사용자에게 노출되는 DOM 변경하는 경우에는 useEffect 훅이 아니라 useLayoutEffect 훅을 써야 하더라구요. (변경전) useEffect : 화면 깜빡임 발생 const Page = props => { const { rawContent } = props; const [content, setContent] = useState(''); useLayoutEffect(() => { let str = rawContent; str = reactStringReplace(str, '@[Board]', (match, i) => ( )); str = reactStringR..
리액트 고유한 Key 값 생성하기 (uuid)
리액트에서 반복되는 컴포넌트를 만들 때 꼭 고유한 Key 값을 부여해야만 합니다. 물론 단순하게 index 값을 key로 간단하겠지만, 그럴 경우 key값이 중복 확률이 높기 때문에 좋은 방법은 아닙니다. 그렇다고 매번 수동으로 유니크한 key를 지정하는 것은 번거로운 일입니다. 따라서 uuid 라이브러리를 이용해서 고유한 키 값을 간편하게 생성해보겠습니다. 목차 UUID란? UUID 라이브러리 설치하기 UUID 사용하기 리액트에서 사용하기 일반 자바스크립트에서 사용하기 컴포넌트의 Key 값으로 사용하기 UUID란? uuid란 Universal Unique Identifier(범용 단일 식별자)의 약자입니다. uuid 함수를 호출하면 다음과 같이 랜덤으로 생성된 문자열이 만들어집니다. 이걸 컴포넌트의 k..
리액트 문자열 찾아서 치환하기 (react-string-replace)
리액트에서 워드프레스 숏코드 같은 거 만들어보려고 문자열 치환하는 방법 찾아봤습니다. 원래 자바스크립트 문법인 String.prototype.replace()를 써도 되겠지만, 저는 단순히 문자열 치환이 아니라 특정 문자열을 특정 컴포넌트로 대체하고 싶었습니다. 일반적인 replace()를 쓰면 컴포넌트로 바로 안 바뀌고 Object 문자열로 들어갑니다. 그래서 문자열을 치환해서 컴포넌트로 변화하려면 이를 배열로 짤라서 대체해야 하는 식으로 구현해야겠더라고요. 근데 찾아보니 잘 만든 라이브러리가 있길래 (럭키!) 냉큼 사용했습니다. react-string-replace를 쓰면 리액트 문자열을 간단하게 문자열을 찾아 바꿀수 있습니다. 목차 React String Replace 설치하기 리액트 문자열 찾아서..
리액트 라우터 해시 링크 (React Router Hash Link)
페이지 내 목차 클릭 시 스크롤 이동하도록 만드려고 했는데 react-router-dom의 Link로는 해시 링크가 제대로 되지 않았다. 처음에는 id 값의 DOM을 찾아서 스크롤 값을 구하려고 했는데 리액트에서는 id값으로 DOM을 찾으려면 ref를 써야하는 것 같다. 일이 커지는 것 같아서 찾아보니 해시 링크를 위한 라이브러리가 있었다. (역시 삽질 전에는 뭐든지 선 구글링을 해야 한다.) React Router Hash Link를 적용해보니까 아주 잘 된다. 대만족! 설치하기 yarn이나 npm으로 설치한다. $ yarn add react-router-hash-link # OR $ npm install --save react-router-hash-link 해시링크 사용하기 다음과 같이 HashLin..
[에러] Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
리액트 프로젝트에서 다음과 같이 fetch를 사용해서 API호출로 JSON 데이터를 가져오려고 했을때 SyntaxError가 났다. fetch('/api') .then(res=>res.json()) .then(data=>this.setState({username:data.username})); 에러 메시지 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 JSON 데이터의 맨 앞자리가 '
리액트 페이지 이동할 때마다 스크롤 맨위로 바꾸기 (ScrollToTop)
리액트에서 라우터로 페이지 이동하면 현재 스크롤 위치가 그대로 유지됩니다. 따라서 제대로 동작하는 웹사이트를 만드려면, 페이지 이동시마다 스크롤 위치를 맨위로 세팅해줘야 합니다. 이 글에서는 리액트에서 페이지 이동할 때 스크롤을 자동으로 맨위로 이동하는 방법에 대해서 알아보겠습니다. (ScrollToTop) 왜 스크롤 위치가 그대로인가요? 그 이유는 리액트는 페이지 이동하는 것은 실제 페이지가 이동하는 것이 아니고, 단지 컴포넌트 상태만 바뀌는 것이기 때문입니다. 스크롤 위치값 정보도 바뀌지 않습니다. ScrollToTop 컴포넌트 만들기 스크롤 위치를 자동으로 맨위로 만드는 가장 단순한 방법은 ScrollToTop 컴포넌트를 따로 만드는 방법입니다. 다음과 같이 ScrollToTop 컴포넌트를 작성합니..