Dev

1. 프로퍼티(properties, props) 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용(단방향 데이터 흐름). 프로퍼티 값은 수정 불가능, 즉 읽기 전용 데이터. 1) 사용법 상위 컴포넌트에서 Props를 지정하고 하위 컴포넌트에서 받은 Props 값을 렌더링. 문자열 전달: 큰 따옴표(" ") 사용 숫자형, boolean 등의 값(문자열 외의 값) 전달: 중괄호( { } ) 사용 (1) 단일값 전달 App.js import React from 'react'; import Hello from "../src/Hello"; function App() { return ( //사용할 컴포넌트 props의 name 값을 "React"로 ); } export default App; Header.js..

1. 컴포넌트(Component) 재사용이 가능한 각각의 작고 독립적인 모듈. 리액트로 개발한 앱을 이루는 가장 작은 단위, 조각. 레고블럭으로 비유할 때, 레고블럭으로 만든 집은 리액트 앱으로 보고 집을 구성하는 하나의 작은 블록들은 컴포넌트라고 할 수 있음. 1) 왜 컴포넌트인가 기존 웹 프레임워크는 MVC(Model, View, Controller) 방식으로 분리하여 관리. 따라서 각 요소들이 독립적이지 않고 의존성이 높아서 재사용이 어려움. → 컴포넌트는 View를 독립적으로 구성하여 재사용 가능! 2) 컴포넌트 사용 컴포넌트의 이름은 항상 대문자로 시작. ※ React에서 소문자로 시작하는 컴포넌트는 DOM 태그로 인식함. 🌟 컴포넌트의 구성요소 프로퍼티(Props) state 컨텍스트(Cont..

1. CRA(create-react-app) React 개발 환경을 쉽게 구축해주는 도구. 💻 CRA를 통해 자동으로 구축되는 요소: webpack: 모듈 번들러 babel: JSX를 JavaScript로 컴파일 jest: 기능 테스트 eslint: 코드 교정 및 스타일 맞추기(형상관리) polyfill: 구형 브라우저에서 지원하지 않는 문법(기능) 지원 HMR(Hot Module Replacement): reload 없이 변경사항 반영 CSS 후처리: sass 사용시 CSS 컴파일, 구형 브라우저에는 Vendor 접두사(perfix) 필요 ※ 단점: webpack, babel, eslint 등 설정 변경하기 어려움.(설정을 변경할 경우 eject) 2. CRA 사용 npx create-react-app..