react 썸네일형 리스트형 Form & User Input What's Difficult About Froms?Handling Form Submission & Validating User InputUsing Built-in Form FeaturesBuilding Custom Solutions What's Difficult About Froms?Form Submission Handling submission is relatively easyEntered values can be managed via stateAlternatively, they can be extracted via refsOr via FormData and native browser features Input Validation Providing a good user experience is tri.. 더보기 Custom Hook Rules of Hooks Why custom Hooks?Creating Custiom HooksUsing Custom HooksRules of Hooks Only call Hooks in Component or Other Hook FunctionsReact Hooks must not be called outside of React component functionsOnly call Hooks on the top levelReact Hooks must not be called in nested code statements (e.g, inside of if-statements) Why custom Hooks?컴포넌트 함수에 들어가는 코드를 감싸고 재사용하기 위함여러곳에서 사용해야 하는 로직에 대해 함수로 .. 더보기 useMemo, useCallback & Data Fetching, HTTP Requests How Does React Update the DOM? and how are component functions executed? mian.jsx 루트 객체 생성 후 앱 컴포넌트를 화면에 렌더링 (리액트를 통해 실행) 모든 컴포넌트 함수는 렌더링 되는 것들만 반환하며,jsx는 결과적으로 js코드로 변환되고, 화면에 렌더될 수 있는 실제 요소로 변환된다. 코드 흐름에 따라 컴포넌트 트리에 순차적으로 추가되며 실행됨. memo() : 컴포넌트 함수를 감싸는데 사용이전값과 현재 값(내부상태)을 비교하여 함수의 재실행을 억제. Don't overuse memo() !Use it as high up in the component tree as possible-> blokcing a component execut.. 더보기 React - 차트 그리기 (ECharts) React환경에서 여러 그래프를 그리는데, Rechart, Chart.js를 쓰다가 ECharts를 사용하기로 했다.처음 들어보는 라이브러리였기에, 조사해보고자 한다. Apache Echarts란?데이터 시각화를 위한 오픈 소스 자바스크립트 라이브러리로, Apache Software Foundation에서 제공한다. 다양한 차트 유형을 지원하며, 대량의 데이터를 빠르게 렌더링하기에 적합하다.반응형 디자인을 지원하며, 여러 상호작용 기능을 추가할 수 있다.다만 러닝 커브가 높다는 단점이 있다. React 환경에서 ECharts 설치npm install --save echarts-for-reactnpm install --save echarts `echarts` is the peerDependence of .. 더보기 08. 좋은 리액트 코드 작성을 위한 환경 구축하기 [모던 리액트 Deep Dive] ESLint를 사용해서 좋은 코드를 작성할 수 있는 환경을 구축하고, 리액트 테스트 라이브러리를 사용해보자! ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위한 가장 쉬운 방식 : 정적 코드 분석 정적 코드 분석이란?코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(버그를 야기하는 코드)를 찾아내어 사전에 수정하는 것을 의미. ESLint : JS 생태계에서 가장 많이 사용되는 정적 코드 분석 도구 ESLint 살펴보기ESLint 동작과정자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다. (기본값으로 espree parser를 사용)2번에서 구조화한 트리를 AST(Abstract Syntax Tree)라 하며, .. 더보기 07. 크롬 개발자 도구를 활용한 애플리케이션 분석 [모던 리액트 Deep Dive] 리액트에서 발생하는 문제가 아닌 버그와 디버깅 이슈를 관리하는 방법.js 코드를 잘못 작성하거나, 메모리, 네트워크, 소스등 일반적인 웹 애플리케이션 관련 디버깅 => 브라우저 개발자 도구 크롬 개발자 도구란?마우스 우클릭 후 "검사" 클릭크롬 개발자 도구에서 웹사이트를 제대로 디버깅하고 싶다면 시크릿 모드를 권장. (브라우저 확장 프로그램이 디버깅에 방해가 될 수 있기에) 요소 탭좌측에서는 현재 웹 페이지를 구성하고 있는 HTML, CSS등의 정보를 확인할 수 있다.직접 코드를 수정하여 웹페이지에서 어떻게 보이는지 빠르게 확인할 수 있다.코드에 의해 클래스나 속성값이 동적으로 제어된는 DOM이 있다면, 중단점을 사용해 디버깅 가능 우측에서는 요소 정보들을 확인할 수 있다. (DOM관련 모든 정보.. 더보기 06. 리액트 개발 도구로 디버깅하기 [모던 리액트 Deep Dive] 리액트로 개발된 애플리케이션의 디버깅을 돕기 위한 리액트 개발 도구인 react-dev-tools에 대해 살펴보자. 리액트 개발 도구란?웹 개발 환경에서 가장 편리하게 사용할 수 있는 방법은 브라우저 확장 프로그램을 사용하는 것이다. 리액트 개발 도구 설치본인이 주로 개발하는 브라우저에 설치 (필자는 chrome기준으로 이야기하겠다.) React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created from revision ccb20cb88b on 7/3/2024.chromewebstore.google.com 우측 상단에 리액트 로고를 확인해 볼 수 있다.리액트 개발 도구가 접근할 .. 더보기 05. 리액트와 상태 관리 라이브러리 [모던 리액트 Deep Dive] 상태 관리가 왜 필요한가? 상태 관리 라이브러리의 필요성과 작동 방식에 대해 알아보자. 상태 관리는 왜 필요한가?웹을 개발할 때 이야기하는 상태란 ? 어떠한 의미를 지닌 값. 애플리케이션 시나리오에 따라 지속적으로 변경 가능 예시UIURLform - loading, submit, disabled, validation 서버에서 가져온 값애플리케이션 전체적으로 관리해야 할 상태가 있다면?각 상태에 따라 다양한 요소들이 그에 맞는 UI를 보여주어야 함상태를 어디에 둘것인가? (전역변수/클로저)상태가 유효한 범위는 어떻게 제한할것인가?상태의 변화에 따라 변경되는 자식 요소는 어떻게 상태의 변화를 감지할 것인가?Tearing 현상 ( 상태의 일관성이 깨져서 UI가 정상적으로 동기화되지 않는 문제)를 어떻게 방지.. 더보기 이전 1 2 3 다음
