react(5)
-
React의 ErrorBoundary 사용 꿀팁!
ErrorBoundary를 React의 컴포넌트 중 하나이다. (라이브러리 X)특정 범위의 컴포넌트를 렌더링할 때 발생하는 JavaScript 에러를 감지 및 처리하도록 돕는다.이와 같은 역할을 할 수 있는데 자세한 사용 예시 등 꿀팁은 글을 통해서 확인해보자!- 에러 기록- 에러 영향 범위 축소- 사용자에게 에러 화면 제공 1. ErrorBoundary의 에러 감지 범위ErrorBoundary는 렌더링 시 발생하는 에러를 감지하며, Errorboundry 하위 컴포넌트 영역에서 발생한 에러를 감지한다.아래 예시에서 두 children에서 발생한 에러들을 감지할 수 있다. 2. ErrorBoundary의 에러 감지[ErrorBoundary가 잡을 수 있는 JavaScript 관련 에..
2024.09.25 -
React의 Router
React의 Routerreact는 SPA(Single Page Application)과 MPA(Multi Page Application) 중 SPA방식이다.말 그대로 한 개의 화면으로 구성된 어플리케이션이다.화면을 전환할 때 다른 화면으로 이동하지 않고 하나의 화면에 콘텐츠 내용만 변경한다.React-Router는 페이지를 새로 불러오지 않고 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. React에서 대표적으로 HashRouter와 BrowserRouter를 사용한다.두 Router의 특징을 살펴보자! HashRouter주소에 해시태그(#)가 붙는다. (www.test.com/#/path)새로고침해도 에러가 발생하지 않는다.검색엔진으로 읽지 못한다.(# 때문에)주로 정적인 페이지에 ..
2023.04.20 -
React와 데이터 바인딩
데이터 바인딩이란?두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다.화면에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 일치시키는 기법이다.데이터 바인딩은 양방향/단방향이 있다.단방향 데이터 바인딩은 데이터와 템플릿을 결합하여 화면을 생성한다.반면, 양방향 데이터 바인딩은 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다. > 즉, 화면 사이의 데이터가 계속해서 일치하게 된다. 단방향 데이터 바인딩컴포넌트 내에서 '단방향 데이터 바인딩'은 JS(Model) -> HTML(View) 처럼 한 방향으로만 데이터를 동기화하는 것이다.역으로 JS(Model) 양방향 데이터 바인딩 (자동 동기화)컴포넌트 내에서 '양방향 데이터 바인..
2023.04.19 -
MobX와 상태관리
1. 상태관리(State Management)란?데이터를 관리하는 방법데이터를 설계된 UI/UX에 맞게 설계하고 구현하는 일네트워크를 통해 서버로 전달되는 클라이언트의 요청에 따라 변화하는 상태를 관리하는 일 2. MobX의 주요 개념MobX는 react의 상태 관리 라이브러리이다. 1) Observable state(관찰 받고 있는 "state")state의 변경이 있으면 MobX에서 관찰하고 있다가 어떤 부분이 바뀌었는지 파악 2) Computed Value(연산된 값)Observable state의 변화에 따른 값이벤트 발생으로 인해 어떠한 연산에 필요로 하는 state에 변화 발생 시, 그 state변화에 따라 새로운 연산 작업 수행 > 만약 변화 없으면 기존 값 사용 3) Reactions (..
2023.04.18 -
[React-Native] RN은 어떻게 작동할까?1 (가상 DOM)
가상 DOM에 대해 알아보기 전에 DOM이 무엇인지 알아보자! 별코딩님의 React의 가상돔 (Virtual DOM)이 뭔가요? (짱 쉬움) 영상을 보고 정리해보았다! : https://www.youtube.com/watch?v=gc-kXt0tjTM DOM이 무엇일까? 웹 사이트의 글, 버튼,, 하나하나를 요소라고 한다. 그리고, 이 모든 것을 담고 있는 것을 Document 문서라고 한다. DOM이란 웹 페이지의 요소를 트리 형태로 표현한 것이다. 우리는 DOM이 제공하는 api를 통해 DOM구조에 접근할 수 있고, 원하는 요소를 입맛대로 변경할 수 있다. 이 것을 DOM조작이라고 한다. ex) JS: getElementById( ), querySelector( ) 가상DOM이 무엇일까? 가상DOM을 ..
2023.03.15