React

Components, JSX & StateBuilding User Interfaces with ComponentsUsing, Sharing & Outputting DataHandling User EventsBuilding Interactive UIs with State

React Apps Are Built By Combining Components리액트로 만들어진 어플리케이션은 컴포넌트들의 집합이다.컴포넌트는 복잡성과 상관없이 무조건 사용하게 된다.리액트에서만 사용하는 특별한 개념은 아니다.React Component => Wrap

Used to describe & create HTML elements in JavaScript in a declarative wayJavaScript 함수에 HTML이 있는것 처럼 보인다.비표준의 자바스크립트 문법을 사용한다.자바스크립트 내에 HTML을 생성하고 요소

https://ko.react.dev/learn/your-first-component기존에는 웹 페이지를 만들 때 웹 개발자가 컨텐츠를 마크업한 다음 JavaScript를 뿌려 상호작용을 추가⏩ 웹에서 상호작용이 중요했던 시절에 효과적이제는 많은 사이트와 모든

`createRoot`

아래와 같은 페이지가 있다고 하자 React Essentials 옆에 있는 내용을 동적으로 바꾸고 싶다면 어떻게 해야할까? 위와 같은 컴포넌트로 내보내고 있다. Fundamental 부분을 동적으로 바꿀려면 JSX, React에서는 중괄호를 활용한다. JSX와 리액트에게 동적인 값을 출력하고 싶다고 명령 이 중괄호 사이에 원하는 자바스크립트 표현을 ...

JSX 코드에바로 묶는 과정은 틀린것은 아니지만배포되는 과정에서 유실될 수 있는 위험이 있다.(번들링과 관련됨)import 로 가져오기빌드과정에서 최종 페이지 및 배포 패키지에 포함되도록 하기 때문에설정된 프로젝트에 import 가능❗ 주의점자동으로 생성된 경로를 포함

컴포넌트의 큰 장점\-> 재사용성Can Reuse React ComponentsBut Don't Have To!한번만 사용하는 컴포넌트를 구축하는 일도 있다.한 컴포넌트의 형태는 계속 사용하지만데이터가 다를경우는?Configuring Components With Pro

모든 컴포넌트를 한개의 JSX 파일에 있는것이 바람직할까?작동이 되겠지만 관리가 힘들고 다른사람이 읽기도 힘들고어떤것을 React에 명령하는지 파악하기도 힘들다작성하는 Author도 자기가 뭘 만들고 있는지 파악하기 힘들어 질 것이다. 다수의 컴포넌트가 한 파일에 저장

React에서는 JSX에 이벤트 핸들러를 추가할 수 있다. 이벤트 핸들러는 클릭, 마우스 호버, 폼 인풋 포커스 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수 `이벤트 핸들러 추가` 이벤트 핸들러 추가를 위해서는 먼저 함수를 정의하고 이를 적절한 JSX 태그

이미지를 public/ 디렉토리에 저장하고 index.html 또는 index.css 파일 내에서 직접 참조 가능⏩ public/에 저장된 이미지 (또는 일반적으로: 파일)이 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공index.html과 마찬가지로,