CheolCheol Dev Note

부모 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속..

리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고,상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 리덕스 스토어라는 개념을 사용 트리구조에서접근을할때 상위를타고타서가는게아닌 단일스토어를거쳐서접근 과정 makeimport redux액션을 정의액션을 사용하는, 리듀서 생성리듀서를 합친다combineReducers 최종 합쳐진 리듀서를 인자로, 단일 스토어를 만든다. createStroe(리듀서); useimport react-reduxconnect 함수를 이용해 서컴포넌트에 연결 출처: https://velopert.com/3528,인프런 타입스크립트 코리아 세미나

어제는 data를 화면에 뿌리는 것까지 성공했다.이번에 구현을 할것은 버튼 기능이다. 페이지네이션 검색 등 구현해야할 부분은 많은데 그 중에서 우선적으로 구현해야할 부분은 버튼기능인 것 같아먼저 구현을 한다. 어제 글을 다시 설명하면 현재 컴포넌트의 데이터 전달은 다음과 같으며 내가 구현하고 싶은 기능은 다음과 같다.하늘색은 사용자 화면단 부분이고녹색은 data-table 모듈이고노랑색은 사용자가 만들고자 하는 column을 설정하는 부분이다 그래서1. 사용자는 모듈에게 row data들을 주고2. column을 설정하는 부분(directive) 에게는 column 데이터를 주며3. directive에서 받은 column 데이타를 다시 모듈에게 데아터를 줘4. 화면단에 표시해준다. 이제 오늘은 이 부분을..