React 공식문서

라이브러리로 프로젝트 원하는 곳에 추가하면 된다HTML 파일에 DOM 컨테이너 설치body 태그 내 비어있는 div 태그에 id 속성을 준다스크립트 태그 추가처음 두 태그는 React를 실행시키고 3번째 코드는 만든 컴포넌트를 실행리액트 컴포넌트 만들기npx는 오타가

JSX는 엘리먼트를 생성한다React는 렌더링 로직이 UI 로직과 연결되어있다는 사실을 인정하고JSX는 자바스크립트를 확장하여 마크업과 로직을 함께 사용한다기술을 인위적으로 분리하는 대신 모두 포함하는 컴포넌트라는 느슨하게 연결된 유닛으로 관심사 분리JSX 사용이 필수

엘리먼트는 React의 가장 작은 단위로 화면에 표시할 내용을 기술한다브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체로 쉽게 생성할 수 있다React DOM 은 엘리먼트와 일치하도록 DOM 을 업데이트 한다엘리먼트는 React 컴포넌트를 구성하는 구성

컴포넌트를 통해 재사용 가능한 여러 조각으로 UI를 구성, 각 조각을 개별적으로 관리한다개념적으로는 자바스크립트의 함수와 유사하다화면을 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다컴포넌트를 정의하는 가장 간단한 방법은 자바스크립트 함수를 정의하는 것이 함

useState hook 사용state는 props와 유사하지만 비공개이며 컴포넌트에 의해 완전히 제어된다 (변경할 수 있는 값)state는 직접 수정하지 않고 setState()를 통해서만 업데이트 한다state는 컴포넌트에 속해있고 React는 state의 변화에

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하다문법은 camelCase를 사용JSX를 사용하기 때문에 문자열 대신 함수로 이벤트 핸들러를 전달React 에서는 false를 반환해도 기본 동작을 방지할 수 없다prev

React는 강력한 합성 모델을 가지고 있다상속 대신 합성을 사용하여 코드를 재사용 하는 편이 좋다어떤 자식 엘리먼트가 올지 예상할 수 없는 경우children prop 을 사용하여 자식 엘리먼트 출력에 그대로 전달하는 것이 좋다

어떤 것이 컴포넌트가 되어야 하는지..?\-> 함수나 객체를 만들 때 처럼 하면 된다단일 책임 원칙을 갖는다\-> 한 컴포넌트가 하나의 책임을 가지고, 완전히 캡슐화 해야 함컴포넌트가 커지게 되면 작은 하위 컴포넌트로 분리한다ProductTable(노란색): 예시 전체

웹 접근성 (a11y)은 모두가 사용할 수 있도록 웹 디자인, 개발을 하는 것을 의미한다보조 과학 기술(assistive technology) 들이 웹 페이지를 잘 해석할 수 있도록 접근성을 갖추는 것React 는 접근성을 갖춘 웹을 만들기 위한 모든 지원을하고있으며

context 를 이용하면 단계별로 일일히 props를 넘겨주지

대부분 React 앱들은 webpack, vite 같은 툴을 사용하여여러 파일을 하나로 병합한 번들 된 파일을 웹페이지에 포함하여 한 번에 앱을 로드한다App.jsmath.js실제 번들은 이렇지 않지만 이런 느낌webpack 같은 툴을 이용하지 않으면 스스로 번들링을

Context 객체를 생성한다Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 사이에서 가장 가까이있는 paired Provider로 부터 현재값을 읽는다defaultValue 매개변수는 트리 안에서 적절한 Provider를찾지 못했을 때만

과거에는 컴포넌트 내부 자바스크립트 에러가 React 내부 상태를 훼손하고다음 렌더링에서 암호화 에러를 방출하곤 했다애플리케이션 이전 단계의 에러로 인해 발생하지만리액트는 컴포넌트 내에서 에러를 정상적으로 처리할 수 있는 방법을 제공하지 않았었다UI 일부에 존재하는 에