programming study/React (37) 썸네일형 리스트형 Hook의 소개 React 16.8부터 새로 추가 1. Hook의 특징 선택적 사용 코드를 다시 사용하지 않고 컴포넌트 안에서 Hook을 사용 이전 버전과의 호환성 React 개념에 더 직관적인 API 2. 동기 상태 로직 재사용의 어려움 컴포넌트 사이에서 상태 로직 재사용의 어려움 render props, HOC 패턴으로 해결 가능하나, 코드의 추적이 어려워짐 래퍼지옥(wrapper hell) 야기 Hook을 사용하면, 상태 관련 로직을 추상화할 수 있음 독립적인 테스트, 재사용 가능 복잡한 컴포넌트 로직 생명 주기 메서드에서 관련 없는 로직이 섞여들어가는 경우가 있음 componentDidMount, componentDidUpdate 생명주기 메서드를 기반으로 쪼개는 것 보다, Hook을 통해 서로 비슷한 것을 작은.. 성능 최적화 1. 프로덕션 빌드 활용 React에서 보여주는 경고는 개발에 큰 도움을 주지만, 성능 상 좋지 않음 프로덕션 버전을 사용해야 함 React Developer Tools for Chrome Extenstion을 사용하여, 프로덕션 빌드가 되어있는지 확인 가능 2. Create React App 아래 명령어를 실행하면, build 디렉토리 아래에 애플리케이션 프로독션 빌드파일이 만들어 짐 npm run build 3. webpack webpack v4 이상에서는 프로덕션 모드에서 기본적으로 코드를 축소 const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'production', optimization: { min.. Fragments DOM에 별개의 노드를 추가하지 않고 엘리먼트들을 그룹화할 수 있는 방법 동기 특정 HTML은 부모와 자식의 종속관계가 분명할 수 있음 div를 사용하면 종속관계를 깨트려 렌더링이 유효하지 않음 React.Fragment는 그룹화만을 위한 컴포넌트로 렌더링이 되지 않음 const table = () => { return ( ) } ------------------------------------------------------- const Columns = () => { return ( 리액트 예시 ) } 단축 문법 단, key가 존재하는 경우는 Fragment를 명시적으로 선언해야 함 const Columns = () => { return ( 리액트 예시 ) } Reference React 공식 문서 에러 경계 1. 에러 경계란 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안 됨 이를 해결하기 위해 에러 경게가 도입 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 컴포넌트 에러 경계가 에러 메시지를 렌더링하는 것에 실패하면 그 위의 가까운 에러 경계로 전파됨 선언적인 표현 vs. try/catch 명령형 코드에서 동작 이벤트 핸들러에서 사용할 것 2. 에러 경계가 포착하지 못하는 것 이벤트 핸들러 비동기적 코드 서버사이드 렌더링 에러 경계 자체의 에러 3. 사용법 에러 경계 정의 에러 경계는 클래스에서 정의해야 함 생명주기 메서드인 아래 2 가지 메서드를 사용 static getDerivedStateFromError componentDidCatch .. 코드 분할 번들링 Webpack과 같은 툴을 사용하여 여러 파일을 하나로 번들링 번들링된 파일을 한 번에 로드하여 앱을 실행 1. 코드 분할 규모가 큰 앱을 번들링하면, 로드시간이 길어 짐 이를 방지하여, 코드를 나누기 런타임에 여러 번들을 동적으로 불러옴 지연 로딩을하여, 성능 향상을 시킬 수 있음 2. Suspense & React.lazy Suspense 컴포넌트 하위에서 사용 가능 컴포넌트가 로드되길 기다리는 동안 예비 컨텐츠를 보여줄 수 있음(ex. 로딩 화면) fallback : 컴포넌트가 로드될 때까지 기다리는 동안 보여줄 React 엘리먼트를 넘길 props 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수 있음 React.lazy는 동적 import를 호출하는 함수를 인자로 가짐 .. 웹 접근성 모두가 사용할 수 있는 웹 사이트를 개발하는 것 보조과학기술(assistive technology)이 웹 사이트를 해석할 수 있도록 하는 것 스크린 리더 1. 시맨틱 HTML div를 지양하고 의미가 있는 태그를 사용 React로 구성한 코드가 돌아기게 만들기 위해 사용하는 경우, React Fragment를 사용할 것 function example() { return ( 예시 예시 ) } ----------------------------------------------------------------- // Good function example() { return ( 예시 예시 ) } 2. 라벨링 input, textarea와 같은 HTML 폼 컨트롤은 구분할 수 있는 라벨이 필요 jsx에서는 .. 웹 접근성 모두가 사용할 수 있는 웹 사이트를 개발하는 것 보조과학기술(assistive technology)이 웹 사이트를 해석할 수 있도록 하는 것 스크린 리더 1. 시맨틱 HTML div를 지양하고 의미가 있는 태그를 사용 React로 구성한 코드가 돌아기게 만들기 위해 사용하는 경우, React Fragment를 사용할 것 function example() { return ( 예시 예시 ) } ----------------------------------------------------------------- // Good function example() { return ( 예시 예시 ) } 2. 라벨링 input, textarea와 같은 HTML 폼 컨트롤은 구분할 수 있는 라벨이 필요 jsx에서는 .. React로 사고하기 React의 관점에서 앱을 설계하는 방식을 알아보기 1. UI를 컴포넌트 계층 구조로 나누기 디자이너와 함께 일한다면, Phtoshop 레이어 이름이 React 컴포넌트의 이름이 될 수 있음 단일 책임 원칙 하나의 컴포넌트는 한 가지 일을 하는 것이 이상적 하나의 컴포넌트가 커지게 된다면, 이보다 작은 하위 컴포넌트로 분리되어야 함 데이터 모델이 적절하게 만들어졌다면, UI가 잘 연결됨 UI와 데이터 모델이 같은 인포메이션 아키텍처를 가지는 경향이 있기 때문 각 컴포넌트가 데이터 모델의 한조각을 나타내도록 분리 2. React로 정적인 버전 만들기 컴포넌트 계층구조를 만든 이후, 앱을 실제로 구현 데이터 모델을 가지고 UI 렌더링을 하기 아무 동작도 없는 버전 다른 컴포넌트를 재사용하는 컴포넌트를 만들기.. 이전 1 2 3 4 5 다음