혜르미온느

특정 문자열을 볼드 처리 하는 방안을 테스트해보던 중 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..

우연히 아티클을 하나 보았는데, useState와 useRef를 비교하는 글이었다. 두 개념이 다른데 비교가 될 수 있는 것인가? 라는 생각에 아티클을 읽던 중 충분히 비교함직한 내용이었고, 이를 기반으로 구글에 검색하여보니 이미 많은 분들이 두 개에 대한 차이를 고민하며 글을 올려두었다. 내가 두 개념이 다르다고 단정지었던 부분은 useRef가 DOM에 관련하여서만 사용되는 줄 알았기 때문인데, 나름대로 공부한 것을 정리해보고자 한다. useState란 먼저 useState란 변수를 동적으로 수정하고, 이에따라 dom을 리랜더링시키기 위하여 사용되는 react hook 중 하나이다. useState는 다음과 같이 상태값(count)과 그 값을 갱신하는 함수(setCount)를 반환하도록 구성되어있다. ..

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

2022년 3월 말에 리액트 18이 출시되었다. 근 1년만의 첫 업데이트였다. 리액트 자체를 익히는데 급급했던 나에게는 큰 이슈가 아니었으나 지금 생각해보니 업그레이드 된 기능을 인지하고, 적용하는 것도 좋을거라는 생각이 들었다. 참고 링크들만 수집해두고, 하나씩 하나씩 꺼내어 공부해보아야겠다. ✔️ 참고링크 https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022 GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces. A declarative, efficient, and flexi..

이전에 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 경고 ..