React Props / State - React의 컴포넌트는 상태 값(state)을 이용해서 UI를 표현 - 컴포넌트 간의 단방향 데이터 전송으로 props를 사용하고 컴포넌트 내부에서 사용하는 state가 존재 - 컴포넌트 간의 단방향 데이터 전송으로 props를 사용하고 컴포넌트 내부에서 사용하는 state가 존재 - props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용 데이터 변경 불가 (readonly) 컴포넌트 호출 시 attribute 사용 - state는 컴포넌트 내에서 관리하는 상태 값으로 데이터를 유동적으로 다룰 때 사용 데이터 변경 가능 변경된 상태를 컴포넌트에게 알려주기 위해서 useState 함수 사용 State - 컴포넌트가 가지는 내부 저장공간 - state ..

React ↳ pakage.json - 프로젝트에 사용되는 라이브러리 목록 - 프로젝트 실행에 필요한 명령어 목록 ↳ pakage-lock.json - pakage.json 으로는 부족한 정보를 도와주는 파일 - 의존성 트리에 대한 정보를 모두 가지고 있음 - node_modules 없이 배포하는 경우 반드시 필요 - 프로젝트 저장 또는 타인에게 전달 - npm 이 node_modules 트리 또는 pakage.json 이 수정될때 자동으로 생성됌 - 저장소에서 꼭 같이 커밋을 해야된다! ♠ 파일 순번 ① index.html ② index.js ③ app.js ... ♠ Deprecated : '중요도가 떨어져 더 이상 사용되지 않고 곧 사라지게 될 것' 이라는 의미 Reactstrap 사용하기 1. c..

● React ● (1) 시작 전 튜토리얼 1) 프로젝트 실행 (pakage.json 의 명령어 중 선택) npm run start 2) 프로젝트 구성 파일 - public/index.html - src/index.js - src/App.js - src/index.css - src/App.css (2) HTML 문서를 리액트로 변환 App.js 파일에서 컴포넌트 단위(함수)로 쪼개어 분류 import './App.css';// import 문 => 외부 파일 임포트 import styles from './nav.module.css';// 컴포넌트에서 쓰이는 css는 중간에 module 필수 function Header(data_header) {// 컴포넌트(함수)의 파라미터 : 해당 컴포넌트에서 쓰이는 ..

배열 (Array) 1) 배열 초기화 const arr1 = new Array(); // new 사용 const arr2 = [1, 2]; // 대괄호 사용 2) 인덱스를 이용한 접근 const animals = ['🐶', '🐱', '🐷']; console.log(animals); console.log(animals.length); console.log(animals[0], animals[2]); console.log(animals[3]); // undefined console.log(animals[animals.length - 1]); // last 3) 반복문을 이용한 요소 제어 const animals = ['🐶', '🐱', '🐷']; // 고전적인(전통적인) 방법 // for (let i = 0 ..