Ho Jung

1. React State 하나의 컴포넌트 안에서 전역 변수처럼 사용되는 변수로 컴포넌트의 상태를 관리함 Hook함수형 컴포넌트에서 React에서 제공하는 기능을 사용할 수 있게 해주는 기능 (클래스형 컴포넌트는 자체적으로 생명주기 관리, 상태 변화 관리가 가능하지만 함수형은 불가능하기 때문에 Hook 이라는 별도 기능을 제공) **대표적인 Hook 사용 기능으로 useState, useContext, useEffect. useReducer 등이 있음 useState컴포넌트의 상태 값이 변하게 되면 컴포넌트를 다시 렌더링 (리랜더링) 시키는 함수 React 라이브러리에서 제공 import React, {useState} from ‘react’;  #예제 1 1. src/components/R06_Stat..

1. React Props- React에서 컴포넌트에 데이터를 전달하는 방법 중 하나 - 부모 컴포넌트 → 자식 컴포넌트로 전달 - props로 전달 받은 값은 컴포넌트에서 변경할 수 없음(읽기 전용) - 컴포넌트간의 데이터 전달이 간단해지고 유지보수성, 재사용성이 증가됨. #예제11. src/components/R03_Props1.js 생성 후 작성import React from 'react';// props : 부모 컴포넌트가 자식 컴포넌트에 데이더 전달 시 사용하는 객체// * props는 자식 컴포넌트에서 수정 불가능 *const PropsEx1 = (props) => {// 부모 컴포넌트(App.jsdml Function App())로 부터 전달 받은 값(props) 확인console.log('..

1. React app 실행 원리 - yarn start를 통해 서버가 켜짐- public/index.html(메인 페이지)가 열림- index.js에서 index.html 중 id가 "root"인 요소를 찾아- App.js에서 반환된 컴포넌트(요소)를 렌더링(화면에 출력)(App.js에 작성된 내용으로 화면이 만들어진다!) 2. JSX - JavaScript Xml의 줄인말- React에서 UI를 작성하기 위한 문법으로 JS 코드 내에 HTML 코드 작성 가능- JavaScript와 HTML형태로 작성이 쉽고, 가독성 증가- JSX 주석 : {/* 주석 내용 */}  3. Component(컴포넌트)  - React App의 구성 요소- UI(HTML 요소)를 작은 조각으로 나누어 관리- 재사용이 가능..

- Node.js 설치하기 - LTS 버전 설치하기 - C드라이브 tools에 설치 후 설치파일 더블클릭하여 설치 진행하기- C드라이브 workspace에 react 폴더 만들고 Git bash (터미널) 열기 (Bash는 Unix 기반 시스템의 셸이므로 npm과 yarn을 설치 및 이용하는데 효율적임)  1. Node.js 설치 및 버전 확인하기$ node -v 2. Yarn 설치 및 React 앱 생성- yarn 설치 및 버전 설정$ npm install -g yarn$ yarn --version- react 앱(프로젝트) 생성하기$ yarn create react-app {앱이름} - 아래와 같이 Happy hacking! 이라는 문구가 뜨고 명령이 종료되면 정상적으로 프로젝트 생성됨- VSCode..