Record

보기 쉽게 정리하려 포스팅합니다. 1. React if { exampleIdx === 1 && 1 출력 } { exampleIdx === 2 && 2 출력 } //Show if someItem {someItem && displayThis} //Show if else {someItem ? displayThisIfTrue : displayThisIfFalse} https://stackoverflow.com/questions/36771017/what-is-the-equivalent-to-ng-if-in-react-js

보기 쉽게 정리하려 포스팅합니다. 1. 부모 컴포넌트 import React from "react"; import ChildComponent from "../ChildComponent/ChildComponent"; export default class ParentsComponent extends React.Component { parentsFunction = (idx) => { console.log(idx); } render() { const exData = "data"; return ( // 함수 전달 ) } } 먼저 자식 컴포넌트로 함수를 전달하고 2. 자식 컴포넌트 import React from "react"; export default class ChildComponent extends Reac..

1. React props - React에서 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. props을 바꾸려면 부모 컴포넌트에서 바꿔주어야 합니다. 1) 함수형 컴포넌트 function ExampleComponent(props) { return Hello, {props.name}; } export default ExampleComponent; 1-1) 함수형 컴포넌트, 화살표 함수 문법 const ExampleComponent = (props) => { return {props.name}; } export default ExampleComponent; // 또는 const ExampleComponent = ({..

보기 쉽게 정리하려 포스팅합니다. 1. React import // React import React from "react"; // CSS import "./ExampleComponent.css"; // Component import ExampleComponent from '../components/Example/ExampleComponent' // Library import { BrowserRouter } from 'react-router-dom'; import { Route, Switch } from 'react-router'; import { Redirect } from 'react-router'; 2. React Component 기본 / ES7 React/Redux/GraphQL/React Na..

보기 쉽게 정리하려 포스팅합니다. 1. React 프로젝트 설치/생성/실행 1) 설치 npm install -g create-react-app 2) 생성 create-react-app client 3) 실행 cd client npm start 2. React 구조 3. React 라우터 설정, BrowserRouter 1) 설치 npm install --save react-router-dom 2) 설정 // App.js(react-router-dom version 5.2.0) import { BrowserRouter, Switch, Route } from 'react-router-dom'; import { Redirect } from 'react-router'; import Header from './c..

ngIf를 사용하는 방법은 다음과 같고 Example 단방향 데이터에서의 if문 사용법은 다음과 같다. Example {{ !value ? "0" : value }} {{ compare == "0" ? "A" : "B" }} {{ compare == "0" ? (!value_a ? "0":value_a) : (!value_b ? "0":value_b) }}

ngFor를 사용하는 방법은 다음과 같다. 예를 들어 게시판의 글 데이터의 수만큼 html 코드를 반복해야한다고 하면, 아래 코드처럼 반복할 html 문 태그 안에 *ngFor="let 데이터 of 데이터배열" 을 넣어주면 된다. 데이터를 출력할 때는 *ngFor="let data of datas" data.board_id 이런식으로 출력해도 되고 *ngFor="let data of datas; let i=index;" data_title[i] data_content[i] index를 이용하여 출력해도 된다. 즉 서버에서 데이터를 요청/응답받아 datas, data_title, data_content 배열에 넣고, 그 배열의 수만큼 html 에서 for문을 돌려 출력해주는 것이다. 그러면 이런식으로 게시..

서버에서 http post 요청을 하여 데이터를 받아오는 방법은 다음과 같습니다. 먼저 HttpClient와 HttpParams 모듈을 추가해준 후, var params = new HttpParams() .set('param1', 'value') .set('param2', 'value') this.http.post(url, params).toPromise() .then((res:any) => { // Example this.name = res.content[0].name; this.title = decodeURI(res.content[0].title) .replace(/%2[cC]/g, ",") .replace(/%3[aA]/g, ":"); ... }) .catch(err => { console.log(..

서버에서 응답받은 데이터를 html에 출력해주고 싶다면 데이터 바인딩이라는 것을 사용하면 된다. 데이터 바인딩에는 단방향 데이터와 양방향 데이터라는 것이 있는데, 엄청 간단하게 요약하자면 단방향 데이터는 그냥 저장된 데이터를 html 코드에 출력해주기만 하는 것이고, 양방향 데이터는 데이터가 변경되면 변경되는 즉시 html의 코드의 데이터가 업데이트 된다는 것이다. 즉 둘 다 데이터 Model로부터 값을 가져와 view에 보여주는 역할을 하지만 위와 같은 차이가 있다. 1. 양방향 데이터 위는 [(ngModel)]과 ionChange 이벤트 리스너를 사용하여 양방향 바인딩을 해준 것이다. 먼저 typescript 파일에서 서버에 http post 요청하여 응답받은 데이터를 name이라는 변수에 넣어준다...

코드를 짜다가 계속 이런 오류를 마주하게 됐었는데, (file transfer, camera, googleMap 등...) 이유는 app.module.ts에 사용하려는 모듈을 import 시키지 않아서 생기는 오류였다. 즉 최상위 app.module.ts에 설치한 plugin을 import하고 providers에 등록해주면 됩니다. 위 코드를 참고하여 넣어주세요. 참고 stackoverflow.com/questions/47236963/no-provider-for-httpclient kenneth-dev.tistory.com/7