혜르미온느

특정 문자열을 볼드 처리 하는 방안을 테스트해보던 중 innerHTML이 react는 조금 다른 방식으로 써야 한 다는 것을 알게되었다. ✔️ 리액트 공식문서 dangerouslySetInnerHTMLinnerHTML브라우저 DOM에서 사용하기 위한 React의 대체품입니다 . 일반적으로 코드에서 HTML을 설정하는 것은 실수로 사용자를 XSS(교차 사이트 스크립팅) 공격 에 노출시키기 쉽기 때문에 위험합니다 . 따라서 React에서 직접 HTML을 설정할 수 있지만 위험하다는 것을 스스로에게 상기시키기 위해 키 dangerouslySetInnerHTML와 함께 객체를 입력하고 전달해야 합니다 . function createMarkup() { return {__html: 'First · Second'};..

문득 useEffect return과 beforeunload의 실행 순서가 궁금해져서 직접 실험해보았다. useEffect의 개념과 beforeunload 개념을 안다는 조건으로 포스팅을 작성해본다. ✔️ useEffect 관련 링크 https://hyermione.tistory.com/56 [뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자 [!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번 hyermione.tistory.com https://hyermione.tistory...

리액트에서는 JSX라는 문법을 사용한다. 이는 구성 요소 랜더링 구성 방법을 제공하는 방식으로 HTML처럼 생겼지만 Javascript의 확장된 문법이라고 말할 수 있다. (리액트에서 jsx 사용이 필수는 아니다.) JSX는 한 번에 하나의 element를 반환하기 때문에 반드시 최상위 하나의 DOM을 추가해줘야한다. 다음 코드에서 최상위는 div로 구성된 마크업이다. import "./styles.css"; export default function App() { return ( Hello CodeSandbox Start editing to see some magic happen! ); } 이 때, h1, h2 두 코드만 랜더링 하고 싶으면 어떻게 해야할까? Hello CodeSandbox Start ..

useMemo는 변수에 사용되고, useCallback은 함수에만 사용되는줄 알았던 나는 useCallback을 사용한 곳에 useMemo를 사용하라는 코멘트를 받게된다...! 뭐야 함수라서 useCallback을 사용했는데, useMemo가 더 잘 어울린다니. 이게 더 다른게 있는거야?!?! 라고 하여 생각한 심화학습- react는 초기 useMemo를 먼저 만들고, 추후에 함수 전용으로 useMemo를 카피한 useCallback을 만든것이기 때문에 useMemo에서도 함수를 사용할 수 있다. 다만, useMemo는 함수를 실행시킨 후, 리턴값을 저장하는 구조이기 때문에 함수 실행 시점 자체를 뒤로 미루는 것을 추가한게 useCallback. 고로 useMemo가 변수 전용은 아니며, 변수/함수 둘 ..

보통 html에서 스타일을 적용하기 위한 class 추가는 다음과 같은 형식으로 사용한다. 리액트에서는 JSX문법을 사용함으로써, class 대신 className을 사용하여 클래스명을 지정해준다. return ; 여러개의 class를 사용할 때에도 그냥 나열하면 쉽다. return ; className는 react에서 조건부로 스타일이 필요한 경우 className에서 손쉽게 사용하도록 도와주는 모듈이다. https://www.npmjs.com/package/classnames classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. S..

리액트를 위한 여러 상태관리 라이브러리 중에 recoil(리코일)이라는 친구가 있다. 리액트를 만든 페이스북에서 상태관리를 위하여 만든 라이브러리이기 때문에 가장 리액트친화적이고, 잘 이해된 상태관리 시스템이라고 이해할 수 있다. 그렇다면 굳이 라이브러리까지 설치하여 사용하는 상태관리가 왜 필요할까? 리액트의 한계성 리액트에서는 특정 상태를 공유하기 위하여 공통된 최상위 요소까지 끌어올려야 한다. 최상위 컴포넌트 -> 하위 -> 하위 -> 사용할 컴포넌트 와 같은 식으로 굳이 필요하지 않은 컴포넌트들을 거쳐 받아 사용할 수 있으며, 이 과정에서 트리 전체가 재 랜더링이되는 비효율성을 가지고 있다. 이에 따라 코드를 분할하고자 할 때, 직접적으로 상태가 사용되지 않는 컴포넌트라 하더라도 엮여있어 분할에 어..

개발 코드 일부에 작은 에러가 나게되면 (warning으로 문구가 뜨고, 계속 진행이 되면 상관 없지만, 사실 이것도 문제) 다음 읽혀야 할 코드를 읽지 못해 전체 애플리케이션이 중단되는 경우가 있다. error boundary는 이러한 문제를 해결하기 위한 방법 중 하나이다. error boundary란? error boundary 컴포넌트로 감싸진 하위 컴포넌트 트리의 어디에서든지 js 에러를 기록하여 깨진 컴포넌트의 트리 대신에 fallback UI를 보여주는 react 컴포넌트이다. 이는 렌더링 도중 혹은 생명주기 메서드 등 전체 트리에서 에러를 캐치 할 수 있다. error boundary가 에러를 포착할 수 없는 경우 이벤트 핸들러 비동기 코드 (setTimeout 등) SSR (서버사이드랜더..

이전에 custom hook을 만들며, hook의 특징을 간략하게 포스팅 한 적이 있다. (https://hyermione.tistory.com/89) 많은 특징들과 규칙이 있었는데, 그 중 하나인 hook이 컴포넌트 최상위에서 로드 되어야 하는 이유에 대하여 정리해 보려고 한다. ✔️ Hook에 대한 궁금증 한 컴포넌트에서는 여러개의 hook을 사용할 수 있음은 우리 모두가 알고 있다. 그렇다면 여러가지 hook 중에서 어떤 state가 어떤 useState에 해당하는지 등에 대한 것은 어떻게 알 수 있는지 궁금해 해 본 적이 (나는 없지만...) 있는가? 모든 랜더링에서 hook의 호출 순서는 동일하고, 리액트는 hook이 호출되는 순서에 의해 전적으로 의지하고 있기 때문에 가능한 것이다. ✔️ Ho..

가끔 개발을 진행하며 데브툴에 뜨는 에러를 보다보면 clean-up이라는 경고가 표기된다. 다행스럽게도 '경고'이기 때문에 기능에는 문제가 없으나 잡고가는게 당연히 좋을 것이다. 하여 clean-up이 무엇을 뜻하는 에러인지 정리해보고자한다. ✔️ Clean-up 경고 문구 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. ✔️ Clean-up 경고 ..

경력의 대부분을 Vue로 보내다가 react 잠깐 react Native 잠깐 발을 담구었던 나는 리액트에 대해서 아직 모르는게 한 가득이다. 그 중 리액트의 꽃(내 마음대로)인 Hook. 커스텀 훅을 작성하여야 하는데, hook을 Hook답게 사용하는 방법에 대하여 궁금해졌다. 참고로 나는 리액트도 뷰처럼 쓰는 것 같다ㅠㅠ ✔️ Hook의 규칙 최상위 레벨에서만 호출하기 hook은 반복문, 조건문 또는 중첩된 함수 내에서 hook 호출이 금지된다. 그래야 컴포넌트가 랜더링 될 때마다 동일한 순서로 Hook이 호출되는 것을 보장할 수 있다. React 함수 내에서 호출하기 JS 함수 내에서 호출은 불가하다. ✔️ Hook의 특징 함수 앞에 use를 붙인다. JSX가 아닌 [] 혹은 {}의 형식으로 ret..