프론트엔드/React 공식문서 읽기

JSX 이해하기

https://ko.reactjs.org/docs/integrating-with-other-libraries.html, https://ko.reactjs.org/docs/jsx-in-depth.html 를 읽고 정리한 글입니다 다른 라이브러리와 통합하기 Backbone.js는 Model-Collection-View 기반으로 구현하는 JS 웹 애플리케이션 프레임워크 JSX 이해하기 JSX는 React.createElement(component, props, ...children)로 컴파일된다 React Element의 타입 지정하기 JSX 코드는 React 라이브러리와 같은 스코프 내에 존재해야 한다 점 표기법 사용 가능 사용자 정의 컴포넌트는 대문자로 시작 JSX 안에서 prop 사용 JavaScript..

고차 컴포넌트(HOC, Higher Order Component)

https://ko.reactjs.org/docs/higher-order-components.html 를 읽고 정리한 글입니다 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 & 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 props를 UI로 변환하지 않고, React에서 코드 재사용의 기본 단위인 컴포넌트를 새로운 컴포넌트로 변환 원본 컴포넌트를 컨테이너 컴포넌트로 포장(Wrapping)하여 조합(compose) ⇒ 사이드 이펙트 없는 순수 함수 내부에서 컴포넌트의 프로토타입을 수정하지 않음 컴포넌트에 기능을 추가 네이밍 : withSubscription처럼 HOC 이름으로 내부 컴포넌트명 감싸기 주의점 rende() 안에서 사용하지 말 것 → 컴포넌트 정의 밖에서 적용하여 컴포넌트가 한 번만 생성하..

Fragments

https://ko.reactjs.org/docs/fragments.html 를 읽고 정리한 글입니다 Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 또는 key가 없다면 key는 Fragment에 전달할 수 있는 유일한 속성

Forwarding Refs (Ref 전달하기)

https://ko.reactjs.org/docs/forwarding-refs.html를 읽고 정리한 글입니다 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법 ⇒ 재사용 가능한 컴포넌트 라이브러리 등에 효율적 forwardRef를 사용할 때 ⇒ 변경사항으로 간주 & 라이브러리의 새로운 중요 버전 릴리즈 고차원 컴포넌트(HOC, Higher Order Component)에 유리할 수 있다 React.forwardRef API를 사용하여 refs 명시적으로 전달 가능 function logProps(Component) { class LogProps extends React.Component { componentDidUpdate(prevProps) { console.log('old props:..

에러 경계(Error Boundaries)

https://ko.reactjs.org/docs/error-boundaries.html를 읽고 정리한 글입니다 UI 일부분에 존재하는 JS 에러가 애플리케이션 전체를 중단시키지 않기 위해 React 16에 도입된 개념 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트 이벤트 핸들러, 비동기적 코드, 서버 사이드 렌더링, 자식이 아닌 에러 경계 자체에서 발생하는 에러는 포착하지 않는다 JS의 catch { } 구문과 유사 에러 경계는 최상위 경로 컴포넌트를 감싸거나 각 위젯을 감싸는 등 개발자가 선택한다 React 16부터는 컴포넌트의 스택 추척 기능을 제공하며, 또한 에러 경계에서 포착되지 않은 에러로 인해 전체 React 컴..

Context

https://ko.reactjs.org/docs/context.html를 읽고 정리한 글입니다 https://velog.io/@velopert/react-context-tutorial도 함께 읽었습니다 context를 이용하면 props 없이 컴포넌트 트리 전체에 데이터 제공 가능 context는 global 데이터에 사용 (예 : 로그인 여부, 테마, 언어 등) context를 이용하면 컴포넌트 재사용에 어려워지므로 필요할 경우에만 사용할 것 ⇒ 컴포넌트 합성이 더 좋은 방법일 수 있다 // 기본값이 light인 ThemeContext 생성 const ThemeContext = React.createContext('light'); // 로그인한 유저 정보를 담는 UserContext 생성 // dis..

코드 분할

https://ko.reactjs.org/docs/code-splitting.html를 읽고 정리한 글입니다 번들링 대부분 React 앱들은 Webpack, Rollup, Browserify 등을 이용하여 여러 파일들을 하나로 통합한 파일을 웹페이지에 포함해 한번에 로드한다 CRA, Next.js, Gatby 등은 Webpack을 함께 설치 (직접 설치도 가능) 코드 분할 번들이 커질 경우 로드 시간이 길어진다 코드 분할은 번들러가 지원하는 기능으로, 런타임에 여러 번들을 동적으로 만들고 불러온다 코드 분할을 통해 앱을 지연 로딩 & 성능 향상 ⇒ 앱 초기화 로딩의 비용 감소 import()를 이용하기 // 이전 import { add } from './math'; console.log(add(16, 2..

접근성

https://ko.reactjs.org/docs/accessibility.html를 읽고 정리한 글입니다 https://poiemaweb.com/html5-semantic-web, https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/forms/Basic_form_hints, https://www.w3.org/International/questions/qa-lang-why, https://www.tpgi.com/using-the-html-lang-attribute/도 참고했습니다 시멘틱 HTML 시맨틱 태그 : 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할 시맨틱 웹 : 웹에 존재하는 수많은 웹페이지들에 메타데이터(Me..

React로 사고하기

https://ko.reactjs.org/docs/thinking-in-react.html를 읽고 정리한 글입니다 목업으로 시작하기 1단계 : UI를 컴포넌트 계층 구조로 나누기 단일 책임 원칙(single responsibility principle)에 따라 컴포넌트 구성 ⇒ 하나의 컴포넌트는 한 가지 일을 한다 UI와 데이터 모델이 같은 인포메이션 아키텍처(information architecture)를 가지는 것이 일반적 ⇒ 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리 2단계: React로 정적인 버전 만들기 state는 상호작용을 위해서만 사용 만드는 건 하향식(top-down)이 쉽지만, 프로젝트가 커지면서 테스트 작성하기엔 상향식(bottom-up)이 더 쉽다 단방향 데이터 흐름(o..

합성 (Composition) vs 상속 (Inheritance)

https://ko.reactjs.org/docs/composition-vs-inheritance.html를 읽고 정리한 글입니다 합성 (Composition) 리액트에서는 상속 대신 합성을 사용하여 컴포넌트 간 코드를 재사용하는 것을 권장 // 예시 코드 function Dialog(props) { return ( {props.title} {props.message} ); } function WelcomeDialog() { return ( ); } 상속 (Inheritance) 컴포넌트를 상속 계층 구조로 작성할만한 사례는 아직 없다 컴포넌트는 원시 타입의 값, React element, 함수 등 어떤 props도 받을 수 있다 기능을 여러 컴포넌트에서 재사용하려면 별도의 JS 모듈로 분리하기 ⇒ 상속..