React

JSX JSX는 JavaScript의 확장 문법임 React로 프로젝트를 개발할 때 사용됨 JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해서 일반 JavaScript 형태의 코드로 변환됨 JSX의 문법 감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 함 이유 : 컴포넌트 ...

Component UI에서 재사용 가능한 개별적인 요소 데이터가 주어졌을 때, 그 데이터에 맞춰 UI를 만듬 라이프사이클 API를 이용하여, 컴포넌트가 화면에 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있음 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있음 컴포넌트 선언 방식 : 클래스형 컴포넌트, 함수형 컴포넌트 Class...

State state : 컴포넌트 내부에서 바뀔 수 있는 값 props : 부모 컴포넌트가 설정하는 값, 자식 컴포넌트는 props를 읽기 전용으로만 사용할 수 있음 하향식 데이터 흐름 (단방향식 데이터 흐름) 모든 state는 항상 특정한 컴포넌트가 소유하고 있음 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있음...

Event Handling React에서 이벤트 처리하기 HTML의 DOM 요소에서 이벤트를 처리하는 방식과 매우 유사함 React에서 이벤트 이름은 소문자 대신 camelCase를 사용함 HTML에서의 클릭 이벤트의 이름은 onclick이고, React에서의 클릭 이벤트의 이름은 onClick임 React에서는 이벤트에 실행할 자바스크립트 코...

Code Splitting 애플리케이션이 커질 수록 번들도 커짐 특히, 큰 규모의 3rd party 라이브러리 추가시 실수로 앱이 커져서 로드 시간이 길어질 수 있음 번들이 거대해지는 것을 방지하기 위해서 번들을 나누어야 함 코드 분할(Code-Splitting) 런타임에 여러 번들을 동적으로 만들고 불러오는 것 Webpac...

Context 일반적으로 React 애플리케이션에서 데이터는 위에서 아래로 props를 통해 전달됨 애플리케이션 안의 여러 컴포넌트들에 props를 전달해주는 경우, context를 이용하면 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 데이터를 공유할 수 있음 context의 용도 React 컴포넌트 트리 안에서 전역적으로 사...

Error Boundaries Error Boundaries가 나오게 된 배경 과거에는 컴포넌트 내부의 JavaScript 에러가 React의 내부 상태를 훼손하고 다음 렌더링에서 암호화된 에러 방출을 유발했음 이러한 에러는 항상 애플리케이션 코드의 이전 단계의 에러로 인해 발생했지만, React는 컴포넌트 내에서 에러를 정상적으로 처리할 ...

Ref & DOM ref : render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공함 Ref의 사용 좋은 예시 focus, text selection, 또는 media 재생을 관리할 때 animation을 직접적으로 실행시킬 때 3rd Party DOM 라이브러리를 React와 같이 사용할 때 Ref 사용시 주의사항 ...

Forwarding Ref Ref forwarding 자식 컴포넌트로 ref를 자동으로 전달하는 기법 재사용 가능한 컴포넌트 라이브러리와 같은 컴포넌트에서 유용함 DOM에 refs 전달하기 React 컴포넌트는 그들의 수행 상세 내용, 출력 결과를 숨김 (캡슐화) 다른 컴포넌트에서 내부 DOM 요소에 대한 ref를 얻을 필요 없...

Portals Portal 부모 컴포넌트의 DOM 계층 구조 바깥에 존재하는 DOM 요소의 자식을 렌더링하는 방법을 제공함 portal이 부모 DOM 요소 바깥에서 렌더링되더라도, 애플리케이션 내의 React 컴포넌트와 비슷하게 동작함 (props와 context API에 접근 가능함) 이유 : DOM 트리에서의 위치와 상관없...

Higher-Order Component(HOC) 고차 컴포넌트(HOC) : 컴포넌트를 인수로 받아서 새로운 컴포넌트를 반환하는 함수 Convention 1 : 인수로 받은 컴포넌트를 변형하지 않고 조합하기 변형(mutation)된 고차 컴포넌트는 누수된 추상화(leaky abstraction)임 Consumer는 다른 고차 컴포넌트들과의 충돌...

Hook Hook의 특징 기존 코드를 다시 작성할 필요 없이 일부 컴포넌트들 안에서 Hook 사용 가능함 이전 버전과 100% 호환 가능함 React v16.8.0에서 Hook을 사용할 수 있음 Hook은 state, context, refs, lifecycle과 같은 React 개념에 좀 더 직관적인 API를 제공함 Hook의 동기 문제 1 : 컴...

useEffect Hook useEffect Hook을 사용하여 함수 컴포넌트에서 side effect를 수행할 수 있음 side effect 예) 데이터 가저오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM 수정하기 등 side effect는 clean-up이 필요한 side effect와...

useState Hook useState Hook을 사용하여 함수 컴포넌트에서 state를 사용할 수 있음 useState를 호출하여 state 변수를 선언할 수 있음 일반적으로 함수 스코프의 변수는 함수가 끝났을 때 사라지지만, state 변수는 React에 의해 유지됨 useState는 state의 초기 값를 인수로 전달 받음 ...

useRef useRef는 .current 프로퍼티가 인수로 전달받은 initialValue로 초기화된 변형 가능한 ref 객체를 반환함 반환된 ref 객체는 컴포넌트의 생명주기 전체에 걸쳐서 유지됨 useRef는 보통 자식에 명령적으로 접근하는데 사용함 ref vs useRef ref는 DOM을 접근하기 위해서 사용됨 `를 사용...

useContext useContext는 React.createContext의 반환값인 context 객체를 인수로 받고, 현재 context value를 반환함 useContext의 인수는 반드시 context 객체이어야 함 현재 context value는 useContext를 호출한 컴포넌트 상위의 가장 가까이 있는 `의 value` p...

Reconciliation 동기 state나 props가 갱신되면 render() 함수가 새로운 React element 트리를 반환함 이전 트리를 새 트리로 변환하기 위해 필요한 최소한의 연산 수를 구하는 알고리즘이 필요함 React는 아래의 두 가정을 기반으로 O(N) 복잡도틀 가지는 heuristic 알고리즘을 구현함 서로 다른 타입의 두...

Strict Mode 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구 Fragement와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화함 development mode에서만 활성화되기 때문에, production build에는 영향을 끼치지 않음 애플리케이션 내 어디서든지 strictMode를 활성화할 수 있음 위 예...

DevTool Profiler React 16.5부터 새로운 DevTools profiler 플러그인의 지원이 추가됨 이 플러그인은 React 애플리케이션에서의 성능 병목 현상을 찾기 위해서 렌더링된 각 컴포넌트에 대한 소요 시간 정보를 수집하는 실험적인 profiler API임 > Note react-dom 16.5부터 DEV mode에서의 프...

Profiler Profiler React 트리 내 어디에나 추가될 수 있음 트리의 특정 부분의 렌더링 비용을 계산해줌 props id : 문자열 onRender : 콜백 함수, React 트리 내 컴포넌트의 업데이트가 커밋되면 호출됨 Profiler는 기본적으로 development에서만 동작함 Rea...

Forms React에서 HTML form 요소는 내부 상태를 갖고 있기 때문에 다른 DOM 요소들과 다르게 동작함 form의 제출을 처리하고, 폼에 입력된 데이터에 대해 접근하기 위해 controlled component를 사용함 Controlled Component HTML에서 `, , `와 같은 form 요소는 자신의 상태를 가지고, 그 상태는 ...

createRoot() DOM Tree와 Virtural DOM Tree를 비교 Virtual DOM Tree에서 ``를 나타내는 node를 생성함 Virtual DOM의 역할 최적화된 업데이트로 사용자 경험 개선 브라우저에 반영하기 전에 사전 작업을 하는 것 업데이트에 우선순위를 부여 Animation vs Text 텍스트보다 ...

useSyncExternalStore useSyncExternalStore가 나타난 배경 React에 동시성이 적용되면서 렌더링이 중간에 중단될 수 있게 되었습니다. 또한 React가 렌더링 도중 우선순위가 높은 일에 스레드를 양보하기 때문에, 네트워크 통신이나 사용자와의 상호 작용이 컴포넌트가 참조하는 상태 값을 변경시킬 수 있는 위험성이 존재합니다....