hubring

리액트 라우터 라이브러리 설치 yarn add react-router-dom 프로젝트에 라우터 적용 src/index.js 파일 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter } from 'react-router-dom' ReactDOM.render( , document.getElementById('root') ); serviceWorker.unregister(); react-router-dom에 내장된 BrowerRouter 컴포..

Ref DOM을 직접적으로 건드려야 할 경우 Ref를 사용한다. 컴포넌트 내부에서 DOM을 직접 접근해야할 경우 ref를 사용, 먼저 ref를 바로 사용하지 않고 원하는 기능을 구현할 수 있는지 반드시 고려한 후 사용. 서로다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 잘못된 설계로 유지 보수가 힘들어짐. 컴포넌트 끼리 교류할 때는 언제나 데이터를 부모 자식 흐름으로 교류 효율적인 교류를 위해 리덕스 혹은 Context API를 이용할 수 있음. DOM을 사용해야하는 상황 - 특정 input에 포커스 주기 - 스크롤 박스 조작하기 - Canvas 요소에 그림그리기 등 클래스형 컴포넌트에서 Ref 사용 import React, { Component } from 'react'; import './..

이벤트 핸들링 주의 사항 1. 이벤트 이름은 카멜 표기법 작성 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달함. 3. DOM 요소에만 이벤트를 설정 가능 => 만약 직접 만든 컴포넌트에 설정할 경우 이벤트가 아닌 props로 값 전달됨. 이벤트 종류 Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animation, Selection, Transition 이벤트 핸들링 매뉴얼 https://reactjs.org/docs/handling-events.html Handling Events – React A JavaScript library for building us..

https://boxfoxs.tistory.com/395 React - Functional Component의 장점, Hook React 16.8 버전부터 FC - Functional Component(함수형 컴포넌트)에 State를 사용할 수 있도록 해 주는 Hooks 라는 개념이 생겼습니다. 스스로 Hooks 는 별로 중요한 기능이 아니라고 생각했었지만, React 개발자 boxfoxs.tistory.com 힘수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 편하며 메모리 자원도 덜 사용함 또한 프로젝트를 완성하여 빌드한 후 배포할 경우 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작음 (하지만 성능과 파일 크기 면에서 사실상 큰 차이는 없음..) 함수형 컴포넌트는 State와 LifeCyc..

vscode에서 Reactjs code snippets 확장 설치 해당 확장 패키지를 다운로드 받으면 간단한 키 입력으로 React 구문을 자동 생성해 줄 수 있다. 클래스 형태로 만들어진 컴포넌트 생성 (js파일) rcc 함수형 컴포넌트 생성 rsc 객체 안에서 사용되는 [e.target.name]: 문법은 속성 계산명 이라는 문법 handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); } https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer 객체 초기자 객체는 new Object(), Object.create()..

Nodejs 웹팩,바벨을 이용하기 위해선 설치해주어야 한다. 윈도우의 경우 아래 링크에서 다운로드 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org macOS or Linux의 경우 nvm이용 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm install --lts yarn Node를 설치하면 npm이 설치됨. 대신 yarn을 사용하는 것을 추천 조금 개선된 버전의 npm이라 생각하면 됨. -> 더 나은 속도, 더 나은 최신 시스템을 사용하기..

Props와 State Props 사용하는 방법 부모 컴포넌트가 자식 컴포넌트에 값을 전달하기 위해 사용. 읽기전용으로 사용 (중요*) 예제) 자식 컴포넌트( 부모로부터 name을 받아 보여줌 ) class MyName extends Component { render() { return ( 안녕하세요! 제 이름은 {this.props.name} 입니다. ); } } 부모 컴포넌트 (자식 컴포넌트에 name 전달) class App extends Component { render() { return ( ); } } 기본값 props 사용하기 (defaultProps) 부모에서 name을 전달을 생략해도 '기본이름'이 나타나게 됨 class MyName extends Component { static def..

Front End 라이브러리란? 웹 돔 관리와 상태값 업데이트 관리를 최소한으로 하고 오직 기능기반 사용자 인터페이스에 집중할 수 있도록 그동안 많은 front end 라이브러리나 프레임워크가 만들어졌다. (react, angular, vue 등..) 3대장 프레임워크 소개 Angular 다양한 기능들이 내장되어 있음. ex ) http client, router, 다국어지원 공식 라이브러리도 지원, 현재는 많은 기업들이 사용하고 있음. Angular2부터 Typesciprt를 표준으로 사용하고 있음 React Component에 집중된 프레임워크가 아닌 라이브러리임. 페이스북에서 나옴, 앵귤러와 달리 View만 신경씀. 다양한 써드파티 라이브러리들이 있음. (공식 라이브러리 없음.) 사용하는 기업이 많..