React - Advanced Concepts

리액트로 컴포넌트들을 만들다 보면 element들을 반드시 최상위 레벨에서 같은 parent로 묶어주어야 한다. 이 과정에서 <div> 떡칠이 되기가 쉬운데, Fragment를 사용하면 div 생성 없이 자식들을 그룹화할 수 있다.가령 다음과 같이 코드를 짜면 실

Webpack, Rollup, Browerify같은 툴을 사용해 여러 파일을 병합한 번들된 파일을 웹페이지에서 로드할 수 있음ex)앱의 크기가 커지게 되면 변들의 규모가 커지게 됨특히 크기가 큰 서드파티 라이브러리를 추가하면 앱의 크기가 커져 로드 시간이 길어지기도 함

JSX -> React.createElement(component, props, ...children)으로 변환되는 문법적 설탕JSX 태그의 첫 부분은 React Element의 타입 결정JSX 태그는 같은 이름을 가진 변수들을 직접 참조함 -> 같은 스코프 내에 참조

버튼이 하나 있다 가정해보자리액트 내부에서는 일반적인 방법으로 button에 대한 ref를 얻을 방법이 없다.일반적인 컴포넌트에서는 문제가 없지만, 이 버튼이 여러곳에서 재사용되게 된다면 이벤트 처리, 상태, 값 확인 등에서 DOM에 직접 접근하는게 불가피할 수도 있다

state나 prop이 갱신되면 리액트 컴포넌트는 새로운 리액트 엘리먼트 트리를 반환함이 때 리액트는 갱신된 트리에 맞게 효과적으로 UI를 갱신하고자 함하나의 트리를 다른 트리를 변환하기 위한 최소한의 연산수를 구하는 알고리즘이 O(n^3)이기 때문에 두가지 가정하에

다른 라이브러리를 사용하지 않으면 데이터 전달은 위에서 아래 방향으로 prop을 통해 전달됨그런데 유저 데이터, 테마 설정과 같이 여러 컴포넌트들에서 산발적으로 사용되는 prop의 경우 prop사용이 번거로워질 수 있음context는 트리 단계마다 prop사용 없이 값