1. 컴포넌트 import 및 export JavaScript의 import, export 문법을 사용하여 컴포넌트를 다른 파일에서도 불러와 사용할 수 있다.컴포넌트의 가장 큰 장점 = 재사용성 리액트는 한번 만든 컴포넌트를 조합해 어디서든 쓸 수 있다.// Button.jsxexport default function Button({ label }) { return {label};}이렇게 만든 버튼 컴포넌트를 다른 컴포넌트 안에 넣어 조합해 새로운 컴포넌트를 만들 수 있다.// App.jsximport Button from './Button';export default function App() { return ( 메인 페이지 );} 다른 파일에서 모듈(컴포넌트)를..

1. 컴포넌트: UI 구성 요소 React의 핵심 개념인 컴포넌트는 마크업, CSS, JavaScript를 하나로 모아 독립적이고 재사용 가능하게 만든 UI 조각이다. HTML 태그와 마찬가지로 컴포넌트를 조합하여 전체 페이지를 구성한다. 마치 레고 블록처럼 한번 만든 컴포넌트를 여러 곳에서 재사용할 수 있다!컴포넌트 재사용의 주요 장점을 몇 가지 살펴보면: 반복적인 코드 작성 감소로 개발 시간이 단축, 동일한 컴포넌트를 사용해서 일관성 유지, 컴포넌트 수정 시 사용된 모든 곳에 자동 반영 되므로 모듈화 되어 관리가 쉬워짐 등 Docs 컴포넌트를 들여다 보면 마크업을 반환하는 함수로 이루어져 있다. export default function Profile() ..

React 앱은 컴포넌트로 구성된다.컴포넌트는 마크업을 반환하는 자바스크립트 함수로 작성한다.컴포넌트 명명은 대문자로 시작한다. ex) MyButtonJSX 문법이므로, 처럼 태그를 닫아줘야 한다. 여러 개의 JSX 태그를 반환할 수 없으므로 ... 와 같이 부모로 감싸주어야 한다. html문법을 jsx로 변환해주는 사이트: https://transform.tools/html-to-jsx function MyButton() { return ( I'm a button );}//컴포넌트 생성export default function MyApp() { return ( Welcome to my app );}//다른 컴포넌트 안에 중첩스타일 추가하기React에..