일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- http://jeonghwan-kim.github.io/dev/2019/06/25/react-ts.html
- 출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
- 출처 : https://webdir.tistory.com/506
- toString
- https://velog.io/@velopert/create-typescript-react-component
- object
- 게시판
- Today
- Total
목록Javascript/React.js (22)
Back Ground
component/BoardList.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130import React, { Component ,Fragment } from 'react'import classNames from 'classnames';import B..
리덕스리덕스는 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태관리 라이브러리 App에서 모든 상태의 로직을 관리하고 있기 때문에 App 컴포넌트의 state를 업데이트하면 App컨포넌트가 리랜더링되고,리액트 특성상 하위 컴포넌트도 모두 리렌더링된다. 기존에 사용 하던 방식으론 컴포넌트 개수가 많지 않기 때문에 App에서 상태 관리를 하고,최적화하는 것이 그렇게 어렵지않지만 프로젝트가 좀더 복잡 해지면 어떨까.. [좀 더 복잡한 혀태의 컴포넌트 구조] 참고 : https://velopert.com/1225 리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것.리덕스를 사용하면 스토어(store)라는 객체 내부에 상태를 담게 됩니다. 이를 사용하면 다음 구조로 프로젝트를 관리 할..
스타일링 즉 CSS 부분이다. create-react-app을 통해서 프로젝트를 생성했으면 알겠지만기본적으로 css파일을 사용하여 컴포넌트에 import하여 사용할 수있는데 이것은 webpack의 css-loader를 이용하여 일반 CSS를 불러오는 방식이였다. CSS를 작성하다보면 클래스네임이 중복될 가능성이 있는데,이를 방지하려고 앞 코드에서는 각 클레스네임에 컴포넌트 이름을 접두사로 붙여주었다. (예 App-header, App-intro 등) 접두사를 붙이는 방법말고 다음 방식으로도 해결 할 수 있다. 1234.App {...} .App .header{...} .App .logo{...} .App .intro{...} cs Sass를 사용한다면 이런식으로 작성할 수 있다.12345.App { .h..
class 문법 방식1234567891011import React, {Component} from 'react'; class Hello extends Component { render(){ return( Hello {this.props.name} ) }} export default Hello;cs컴포넌트에서 라이프사이클 API과 state를 사용해야 할 때 꼭 사용해야한다. 그런데 만약 라이프사이클 API와 state를 사용할 필요가 없고오로지 props를 전달 받은 뷰를 렌더링하는 역할만 한다면 함수형 컴포넌트를 만들면 더 간단하게 선언할 수 있다. 번거롭게 class를 만들고 render()를 만들지 않아도 된다. 함수형 컴포넌트 순수한 함수만으로 컴포넌트를 선언 할 수 있다. ES5 방식123456..
생명 주기 (Life Cycle) API 모든 리액트 컴포넌트에는 라이프 사이클(생명주기)이 존재한다. 컴포넌트수명은 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.(컴포넌트 생성때부터 페이지에서 빠질때 까지) 가끔 컴포넌트르 처음으로 렌더링할 때 어떤 작업을 처리해야 한다든지컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고,불필요한 업데이트를 방지해야 할때 사용한다. 라이브 사이클 메소드 종류 출처: https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드고,Did 접두사가..
IterationSample.js1234567891011121314import React, { Component } from 'react';class IterationSample extends Component{ render(){ return( 눈사람 얼음 눈 바람 ); }} export default IterationSample;cs 이런식으로 ...를 연속으로 사용 해야 할때 반복 코드를 이용해서 작성해보도록 하겠다 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 랜더링할 수 있다.map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱한 후 그 결과로 새로운 배열 생성한다. 1var new_array = arr.m..
에로우 펀션 에서 프로퍼티 JSON 형태로 사용할때는 ({ label : literal }) 를 사용하여아한다. params => {object:literal}이렇게 했을때 에러가 발생한다. 12var func = () => { foo: 1 }; // func() 호출은 undefined를 반환!var func = () => { foo: function() {} }; // SyntaxError: function 문은 이름이 필요함cs 1func = () => ({ foo: 1 });csfoo는 레이블(라벨)로 인식하게 된다. 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A..
리액트 컴포넌트 안에서는 ID를 사용하면 안된다? 리액트 컴포넌트 안에서도 id를 사용할 수는 있다.JSX안에서 DOM에 id를 달면 해당 DOM을 랜더링할 때 그대로 전달된다. 하지만 특수한 경우가 아니면 권장하지 않는다. 예를 들어 같은 컴포넌트를 여러번 사용 한다고 가정해보면 HTML에서 DOM의 id는 유일해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기는 잘못된 사용입니다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에만 작동하기 때문에 이런 문제가 생기지않는다.대부분은 id를 사용하지 않고도 원하는 기능을 구현할 수 있지만,다른 라이버리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 수 있습니다. ref1ReactDOM.render( ,documnet.getE..