CheolCheol Dev Note

Redux 가 좀 더 어려운 데이터 관리 라이브러리 둘다 데이터 관리 분야 MobX @observable 내부상태(state)를표현할때사용 => setState를사용하지않아도된다. @computed @observable이 달려 있는 프로퍼티를 수정하는 작업은 다action이라 불림 (버전업 되면서 없어진 듯) + https://hyunseob.github.io/2017/10/18/mobx-with-react/

부모 Postlist} /> const Postlist= (props: RouteComponentProps) =>{return( Postlist} /> /** Post 호출**/);}; const Post= (props: RouteComponentProps) =>{function goNextPost() {const nextPostId= +props.match.params.postId+ 1;props.history.push(`/posts/${nextPostId}`);}return(Post {props.match.params.postId}페이지 이동{new URLSearchParams(props.location.search).get('body')});}; switch 모듈 일반switch 문처럼비교 의pat..

Angular에서처럼Route를이용해서PathVariable을받을수있다. 이런식으로path에다가parameter를받을값을정해준다. 그래고RouteComponentProps를이요해제네릭에받을파라미터명을입력하고match를이용해파라미터를받는다const Post= (props: RouteComponentProps) =>{return(Post {props.match.params.postId});}; RouteComponentProps의 속성은 다음과 같다. history: H.History; 브라우저의 window.history객체와 비슷함, 주소를 임의로 변경 하거나 되돌아 갈 수 있다.주소를변경하더라도spa 동장방식에맞게페이지일부만리로드 location: H.Location; 브라우저의window.locati..

React-RouterURL을읽어React Compnent를렌더링해서보여주는역활 React는라이브러리이기때문에React-Router라는라이브러리를설치해야한다. React Router V4까지나옴 React-Router의공식깃허브사이트https://github.com/ReactTraining/react-router에설치할라이브들이소개되어있다. import{ BrowserRouteras Router, Link, Route} from 'react-router-dom'; // 주로쓰는애들 를선언해야링크컴포넌트를사용할수있음그리고해당영역을설정해줘야라우팅시렌더링이되며영역외에는항상렌더링되는부분이다. /** ts를사용하면tslint.json 에 "rules": {"jsx-no-lambda": false}**/ path속..

함수형의 stateless component클래스 형태의 statefull componentRedux 가 연결된 container component 가 있다 1. stateless component React는 Props의 데이터형을 설정하기 위해 컴포넌트 클래스는 static 타입의 PropTypes 변수 안에 타입을 선언하는 방식을 사용한다. 하지만 이제는 TypeScript를 사용하므로 interface나 type을 사용해서 Props의 형태를 선언하면 된다.import * as React from 'react' type Props = {} // Props 타입 선언 // 컴포너트의 리턴 타입을 Props 타입과 함께 설정 const TSSFC: React.SFC = props => { const ..