Back Ground

component/BoardList.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130import React, { Component ,Fragment } from 'react'import classNames from 'classnames';import B..

일단 고차 함수가 무엇인가.. 하나 이상의 함수를 인수로 취한다. (예: 절차적 매개변수)함수를 결과로 반환한다. https://ko.wikipedia.org/wiki/%EA%B3%A0%EC%B0%A8_%ED%95%A8%EC%88%98 Redux를 하다보면 connet 사용 하다보면 1import {connect} from 'react-redux';cs 1234const CounterContainer = connect( mapStateToProps, mapDispatchToProps)(Counter);cs 이렇게 하는 부분이 있는데 (Counter는 직접 만든 Class) connect()();즉, 이게 어떻게 구동 된다는 것 인지 이해를 못했는데 node_modules/react-redux/src/co..

rem과 em 둘다 font 사이즈에 따라서 연산처리 되는 것 이다. 10em 과 10rem 동일하게 * 10 이 되는 것인데 상위 요소의 폰트가 (기본 16px) 16일때 16 * 10 = 160px이 되는 것 이다. 하지만 두 기능의 다른점이 있는데 [ rem ]1234 width: 10rem; height: 10rem; /* 폰트 */ font-size:3rem;cs [ em ]1234 width: 10em; height: 10em; /* 폰트 */ font-size:3em;cs 이렇게 똑같은 수치의 em과 rem을 주었을때 서로 크기를 비교해보면 em으로 주었을때 width의 크기는 480px 이고rem으로 주었을대는 width의 크기가 160px 인 것을 확인 할 수 있다. 이는 무슨 차이냐면 ..

리덕스리덕스는 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태관리 라이브러리 App에서 모든 상태의 로직을 관리하고 있기 때문에 App 컴포넌트의 state를 업데이트하면 App컨포넌트가 리랜더링되고,리액트 특성상 하위 컴포넌트도 모두 리렌더링된다. 기존에 사용 하던 방식으론 컴포넌트 개수가 많지 않기 때문에 App에서 상태 관리를 하고,최적화하는 것이 그렇게 어렵지않지만 프로젝트가 좀더 복잡 해지면 어떨까.. [좀 더 복잡한 혀태의 컴포넌트 구조] 참고 : https://velopert.com/1225 리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것.리덕스를 사용하면 스토어(store)라는 객체 내부에 상태를 담게 됩니다. 이를 사용하면 다음 구조로 프로젝트를 관리 할..

RestFul 이란 REST는 Representational State Transfer라는 용어의 약자로서 웹의 장점을 최대한 활용할 수 있는 아키텍처최근의 서버 프로그램은 다양한 브라우저와 안드로이폰, 아이폰과 같은 모바일 디바이스에서도 통신을 할 수 있어야 한다.REST 아키텍처는 Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다. 예제 )1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162var http = require('http') , express = require('express') , static = require('s..

스타일링 즉 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 접두사가..