도찐개찐

Props / State props 와 state는 React에서 데이터를 사용할 때 다루는 개념이다. 실습 코드샌드박스(https://codesandbox.io/s/dank-pond-pfyvq) 를 사용하여 실습 Props props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다. 읽기 전용 src 폴더 구조 CodeSandBox에서 리액트를 실행 시키면 MyName.js를 제외한 파일은 기본적으로 생성이 된다. MyName.js는 props 예제를 위해 만든 파일 App.js import React, { Component } from "react"; import "./styles.css"; import Name from "./Name.js"; class App extends Com..

1. Pagination 전용 앱 생성 # 앱설치 $ yarn create react-app pagination # 설치 된 어플리케이션 경로 이동 $ cd pagination # 필요 컴포넌트 설치 $ yarn add react-icons prop-types react-icons : react에서 자체 배포하고 있는 아이콘 콤포넌트로 버튼 아이콘 사용에 활용하기 위해 설치 합니다. 아이콘 사용이 불필요하신 분들 께서는 설치 하지 않으셔도 됩니다. prop-types : props 전달에 자료형을 체크 하기 위해 설치 하였으나 자료형 체크가 불필요하신 분들께서는 설치 하지 않으셔도 됩니다. 2. 작업 파일 및 import 파일 구조 아래 구초 내용을 확인 하셔서 미생성 구조만 생성해 주시면 됩니다. . ..

Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 구글번역기 결과 잡히지 않은 오류: 는 요소의 자식으로만 사용되며 직접 렌더링되지 않습니다. 를 로 감싸주세요. 1. 문제 원인 react-router-dom 라이브러리가 버전 업데이트 됨으로써 부모요소 미적용 상태에서 태그만을 사용했을 경우 에러 발생 2. 문재 해결 방법 1. 최신버전에 맞게 작성한다. 2. 이전 버전을 설치한다. 최신버전에 맞게 작성하는 방법은 위의 링크에서 잘 설명이 되어있습니다. 저는 이전 버전을 재설치하는 방법으로 문제를 해결했습니다. 3. 문제 해결 작업 폴더의 yarn...

1. 사전 준비 [MacOS] React 설치 하기 1. 사전 준비 본 글에서는 Homebrew를 이용하여 node, yarn를 설치하고 실행하는것을 다루겠습니다. Homebrew 설치 MacOS Homebrew 설치 개요 MacOS 재설정 혹은 신규 설정시 github활용을 하시기 위해 초기 환 dev-truly.tistory.com $ npm install jquery // 또는 $ yarn add jquery src/App.js 를 아래와 같이 작성해 줍니다. import React from "react"; import MainComponent from "./JQuery"; function App() { return ( jQuery ); } export default App; src/JQuery.j..

1. 사전 준비 본 글에서는 Homebrew를 이용하여 node, yarn를 설치하고 실행하는것을 다루겠습니다. Homebrew 설치 MacOS Homebrew 설치 개요 MacOS 재설정 혹은 신규 설정시 github활용을 하시기 위해 초기 환경설정이 필요하신 분들을 위한 포스팅 입니다. mac 환경에서 아래와 같이 환경을 설정하면 비밀번호 등과 같은 불필요한 절 dev-truly.tistory.com 1.1. node.js 설치 $ brew install node 1.2. yarn 설치 $ brew install yarn 2. React 프로젝트 생성 $ yarn add global create-react-app 프로젝트 생성 $ yarn create react-app test-app 3. 앱 실행 ..

​1) for( ) 초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회합니다. 중간에 "break;" 문을 만나면 반복문을 중단합니다. for ([initialization]; [condition]; [final-expression]) statement for( )은 인덱스 0부터 시작해서 배열의 길이만큼 순회하면서 배열의 각 원소들을 출력합니다. const animals = ["lion", "tiger"]; for (let i=0; i { console.log(animal); }); // [콘솔 출력 결과] // lion // tiger ​ ​3) map( ) 배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴합니다. 배열을 순회하므로 중간에 "break;..

1. 화살표 함수의 선언 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래와 같다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암..

기존 자바스크립트에서는 객체를 구현하기 위해 prototype을 사용 했습니다. ES6 에서 나온 class는 기존 객체지향 언어에서 제공하는 객체 생성 방식과 동일한 문법으로 가독성을 높이기 위해 고안된 문법 입니다. // Javascript Prototype var NumberPrototype = (function() { this.number = 0; // 생성자 함수 function setNumber(num) { this.number = num; } // 객체 함수(메소드역할) setNumber.prototype.sum = function(num) { this.number += num; } setNumber.prototype.print = function() { console.log(this.num..