혜르미온느

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

옛-날에 리액트를 처음 접할 때, react는 라이브러리라고 간단하게 이야기 한 적이 있다. 라이브러리와 프레임워크가 어떻게 다른지 왜 리액트가 라이브러리로 분리되는지 드디어 정리해본다. https://hyermione.tistory.com/27 [뷰쟁이의 리액트 시작하기] 리액트를 알아보자. [!이시중] 2021년 5월 21일 22:33에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/33 에서 확인할 수 있음. 글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을. hyermione.tistory.com 먼저 나무위키에 소개된 프레임워크와 라이브러리의 정의를 정리해보자- 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발..

스켈레톤 UI란? 데이터가 렌딩되기 전, 사용자가 보게 될 화면의 윤곽을 먼저 그려준다는 것을 의미한다. 스켈레톤은 해골이라는 의미를 뜻하는데, 사람의 형상 전에 뼈가 되는 해골이 있는 것과 비슷한 의미라고 생각하면 이해가 쉽다. 왜 사용해야하는가? (한국 사람들에게만 특정되는 부분은 아니지만 한국에서 서비스 하는 회사/사람의 입장으로) 빨리빨리와 IT 강국의 맛에 익숙한 한국 사람들은 사이트가 조금이라도 느리면 바로 이탈해버리는 경우가 많다. 하지만 모든 애플리케이션들을 서버와 통신을 하며 로딩되는 시간이 필요할 수 밖에 없다. 이 때, 단순 흰색 화면만 노출된다면 많은 사람들이 렉먹은 줄 알고, 이탈하게 될 것이다. (일단 나부터) 스켈레톤 UI를 사용하게 되면 단순 로딩바를 돌리는 것 보다 이탈률이..

개발 코드 일부에 작은 에러가 나게되면 (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..