도찐개찐

React의 propTypes React 15.5.0 버전이 출시되기 전에는 react 패키지에서 propTypes를 사용할 수 있었지만 이후 버전의 React에서는 프로젝트에 종속성을 추가해야 했습니다. 아래에 제공된 명령을 사용하여 프로젝트에 종속성을 추가 해주시면 됩니다. $ npm install prop-types --save # or $ yarn add prop-types props에서 수신하는 모든 데이터의 유효성을 검사 하기 위해 propType 을 사용할 수 있습니다 . 그러나 사용하기 전에 가져와야 합니다. App.js 파일과 Blog_propType.js 을 추가 하고 하단 소스를 참고 해주세요. propTypes를 가져오면 작업할 준비가 됩니다. defaultProps와 마찬가지로 p..

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 파일 구조 아래 구초 내용을 확인 하셔서 미생성 구조만 생성해 주시면 됩니다. . ..

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. 앱 실행 ..

컴포넌트 생명주기(lifecycle)란 컴포넌트가 페이지에 렌더링 되기 위해 준비하는 과정에서부터 제거될 때까지의 기간을 말하며, 클래스형 컴포넌트는 이러한 생명주기 중 특정 시점에 대하여 원하는 구문을 실행할 수 있도록 생명주기 메소드를 지원합니다. 생명주기와 생명주기 메소드는 위 도표와 같은 타임라인을 가지며, 크게 세 가지 경우로 나누어 볼 수 있습니다. 참고로 각 메소드에서 Did는 해당 시점이 끝난 후 메소드 내용을 실행하겠다는 것을 뜻하며, Will은 해당 시점 직전에 메소드 내용을 실행하겠다는 것을 뜻합니다. 이제 세 가지 경우 각각에 실행되는 생명주기 메소드에 대해 살펴보고 각 메소드의 역할에 대해 알아보겠습니다. 첫 번째, 컴포넌트 인스턴스가 생성(마운트)되고 DOM에 삽입될 때는 아래와..

위와 같이 console.log() 로 값을 찍어보면 두번씩 출력 되는 현상이 나타났습니다. 렌더링 두번 발생 됬는지 추측해 볼 수 있습니다. 결론은 때문 입니다. index.js 소스를 확인해 보면 해당 태그로 둘러 쌓여 있는 것을 확인 할 수 있습니다. root.render( ); Strict 모드는 Fragment와 같이 동작하며 (단순히 감싸는 것), child까지 모두 엄격하게 검사 한다고 생각 하면 됩니다. Strict 모드가 자동으로 부작용을 찾아 주는 것은 불가능 합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와 줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다. 클래스 컴포넌트의 constructor , render 그..

1. curl 패키지 설치 npm 설치전 시스템 패키지를 업데이트 해줍니다. $ apt-get update -y 패키지 업데이트가 완료되면 npm 저장소 추가를 위한 curl 패키지를 설치해 줍니다. $ apt-get install curl -y 2. Node.js 설치 그런 다음 서버에 Node.js를 설치해야합니다. 기본적으로 최신 버전의 Node.js는 표준 Ubuntu 20.04 저장소에서 사용할 수 없습니다. 따라서 Node.js 공식 저장소에서 Node.js를 설치해야합니다. 먼저 다음 명령을 사용하여 Node.js 저장소를 추가하십시오. $ curl -sL https://deb.nodesource.com/setup_14.x | bash - 그런 다음 다음 명령을 실행하여 시스템에 Node.j..