클래스형 컴포넌트 (Class Component ) 1. 내보내기 1-1. default 내보내기 컴포넌트들은 보통 default로 내보낸다. 📑 App.js import { Component } from "react"; //리엑트에서 Component 가져온다. class App extends Component{ render(){ return ( 예산 계산기 ) } } //내보내기 default - 메인으로 내보냄 export default App; 2-1. 클래스 바로 내보내기 여러개 내보낼 수 있다. 📑 App.js import { Component } from "react"; //리엑트에서 Component 가져온다. export class App extends Component{ render()..

JSX (Javascript syntax extension) 1. JSX (Javascript syntax extension)이란 ? JSX를 이용하여 UI를 나타낼 때 자바스크립트 (logic)와 HTML구조를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 할 수 있습니다. 리엑트에서 JSX를 사용하지 않을 수도 있지만, 편리하기 때문에 사용을 권장합니다. 만약 JSX를 사용하지 않는다면 리엑트에서 제공하는 React.createElement API를 사용해야한다. React.createElement API 엘리먼트 객체를 생성 후 IN-Memory에저장 ReactDOM.render 함수를 사용해 실제 웹 브라우저에 그려준다 . 2. JSX..

Single Page Application (SPA) 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것. 결국 index.html 은 하나만 존재한다. 자바스크립트 영역에서 HTML5의 History API를 이용하여 현제 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다. 리엑트에서는 React-Router-Dom 이 History API를 사용한다. History API 명령어 기능 History.back() 세션 기록의 뒤 페이지로 이동하는 비동기 메서드 (= 브라우저의 뒤로가기 기능) History.forward() 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드 History.go() 특정한 세션 기록으로 이동하게 해주는 비동기 메서드 ( 1 을 넣어 호출 시..

Create React App을 이용하여 리액트 설치 1. 터미널을 사용한 간단한 설치 npx create-react-app 이라는 명령어로 간단하게 설치 가능하다. 이전에는 웹팩이나 바벨 같은 모듈을 설치 후 설정을 해야 리액트 앱을 실행할 수 었는데, 위의 명령어를 통해 자동으로 모두 설치와 설정을 할 수 있다. 1-1 . 현제 프로젝트 폴더 경로에서 바로 설치 ※ npx node.js 명령어 npx create-react-app ./ 1-2. 설치 된 파일 및 폴더 확인해보기 1) 이름이 수정되면 안되는 파일 public/index.html : 페이지 템플릿 src/index.js : 자바스크립트 시작 2) Static 파일의 경로 Images : public 내부의 파일만 public/index...

React 라이브러리? 1 . 리액트 ( React ) 사용자 인터페이스를 만들기 위한 javascript 라이브러리 이다. 리액트는 인터렉션이 많은 웹 앱 개발을 위해 주로 사용된다. UI 를 렌더링하는데 관여한다. ( MVC 중에 V ) 1-1. 리엑트 생태계 ( 사용하게되는 라이브러리 ) 1-2. 리액트 사용 이유 상대적으로 배우기 쉬운 라이브러리 여러 기능들으르 위해 이미 만들어져 있는 라이브러리 환경 많은 기업들의 사용으로 검증된 라이브러리 (ex . 페이스북) 1-3. 리엑트 컴포넌트 * 컴포넌트 : 리액트로 만들어진 앱을 이루는 최소한의 단위 리액트는 여러 컴포넌트 조각으로 되어 있다. ex ) 인스타 : 검색 , 포스트, 스토리 등 1-4. 리액트 컴포넌트 종류 클래스형 컴포넌트 함수형 컴..