반응형 react4 Create React App 4주차 - 클래스 & 함수 타입 컴포넌트와 라이프사이클 클래스 & 함수 타입 컴포넌트 새로운 폴더를 만들고 새 프로젝트를 만든 후 터미널에서 create-react-app을 설치한다. npx create-react-app . npm start 클래스 & 함수 방식 컴포넌트의 props 클래스 방식의 컴포넌트에서는 외부에서 전달된 props 값을 받을 때 this를 사용하지만 함수 방식의 컴포넌트에서는 파라미터를 이용하여 props 값을 받는다. 함수 방식의 인자는 아무 이름으로 정해도 된다. // App.js import React from 'react'; import './App.css'; function App() { return ( Hello World ); } // 함수 방식으로 작성한 컴포넌트 function FuncComp(props) { retu.. 2022. 7. 14. Create React App 3주차 - Create/Update/Delete Create 구현하기 1. Control 컴포넌트를 작성하고, 이 컴포넌트가 mode를 변경할 수 있도록 onChangeMode props를 추가한다. // Control.js import { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Control; // App.js ... import Control from './components/Control' class App extends Component { ... ... 디버거를 추가하고 create, update, delete를 클릭하면 mode가 변경되는 것을 볼 수 있다. 2. Create.. 2022. 6. 30. Create React App 실행해보기 - 2주차 크롬 브라우저에서 React Developer Tools 확장 프로그램 설치하기 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 7f673317f on 5/31/2022. chrome.google.com 확장 프로그램으로 설치된 Components 탭을 클릭하면 페이지의 실제 컴포넌트를 보여준다. 클릭하면 각 컴포넌트의 props와 값을 볼 수 있다. 직접 값을 변경할 수도 있다. 컴포넌트를 파일로 분.. 2022. 6. 15. Create React App 실행해보기 - 1주차 개발환경 만들기 1. Node 설치 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Create React App 링크 https://github.com/facebook/create-react-app GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an.. 2022. 6. 2. 이전 1 다음
