1. props 개념 - 컴포넌트 간의 정보 교류 방법 - 부모 컴포넌트에서 자식에게 넘겨준 데이터들의 묶음 (객체) 2, props를 통해 부모->자식으로 값 전달 - ★부모에서 자식으로만 가능 ★ - ★읽기전용 + 변경 불가능 ★ 3 자식 컴포넌트에서 부모에게 받은 값 렌더링 가능 import React from 'react'; function App(){ function Child(props){ return {props.grandFatherName} //"엄마" } function Mother(props){ return ; // props로 name전달함 } function GrandFather(){ const papaName ="홍길동"; return ; // props로 name전달함 } ret..

1. JSX 문법이란? - JavaScript + xml - 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰 (UI)작업 편하게 가능 *리액트에서 뷰를 그리는 방법* - JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다 - 리액트는 딱 하나의 html파일만 존재 (SPA 프레임워크) 2. 프로젝트 내의 JSX 문법 사용하기 (1) 무조건 1개의 엘리먼트 반환하기 function App(){ return ( ~~ ~~~ ); } (2) JSX에서 JS 값을 가져올때는 중괄호{} ! function App(){ const cat_name = 'kitty'; return ( hello {cat_name}; ); } (3) class 대신 className 사용 (4) 인라인..

위치: src/ App.js 1. 리액트 컴포넌트란? - 재사용하기 위한 함수 - 컴포넌트 이름은 무조건 ★ 대문자 ★ + 카멜케이스로 짓기 2. 함수형 컴포넌트 (클래스형 컴포넌트도 있지만 주로 함수형 컴포넌트를 사용 예정) - props로 입력 받음 - 화면에 어떻게 표현되는지 React 엘리먼트를 return * 엘리먼트 : 단순히 화면에 그려지는 html적 요소라고 생각하기 * function Welcome(props){ return Hello, {props.name} } function App(){ return hello } 3. CRA 프로젝트를 컴포넌트 관점에서 해석 (1) 컴포넌트 밖 (내가 필요한 파일을 가져오는 영역) : import [패키지명] from [경로] (2) 자바스크립트 영..

1. CRA 개념 - 개발에 필수요소를 자동으로 구성하는 "완제품 구매" 느낌 - 보일러플레이트 : 신문사에서 반복되는 구간은 강철로 만들어서 찍어냄! 2. CRA 명령어로 프로젝트 생성 - VS코드 터미널에서 아래 코드 실행 yarn create react-app week-1 //프로젝트 생성 npx create-react-app my-app //이것도 프로젝트 생성 가능 ( 선택해서 사용) cd week-1 // 폴더 ( week-1 ) 로 이동 yarn start//프로젝트 시작 npm start //프로젝트 시작 (선택해서 사용) ▶ ls // 현재 내가 위치하고 있는 곳 확인 ▶ App.js 를 메인으로 사용할 예정 3. 절대경로 사용방법 (1) jsconfig.json 파일 생성 (root 경..

[ React.js 개념] : SPA(Single Page Application)기반 개발 프레임워크 : 컴포넌트 단위 (벽돌 느낌) : 비슷한 Angular.js와 Vue.js보다 인기가 많음 * SPA 프레임워크 장점 : 하나의 페이지로 구성 + 서버에 1회 리소스 요청 + 필요할때마다 '데이터' 받아서 수정= 화면 깜빡임 X 단점 : SEO (검색엔진최적화)에 약함 1. 개발환경 필수 프로그램 설치 (1) 크롬 브라우저 : https://www.google.co.kr/chrome/ (2) VS code : https://code.visualstudio.com/ (3) git 설치 : https://git-scm.com/downloads (4) Node 설치 : https://nodejs.org/en..