// react 패키지 다운로드
npm install -g create-react-app
// react 프로젝트 생성
create-react-app project
// spa를 사용하기위한 라이브러리
npm install --save react-router-dom
//git page에 올리기 위한 라이브러리
npm install --save gh-pages
// url링크를 거는방식<Linkto="/link">
// url 링크를 거는데 정확한 링크가아니면 출력되지않는다.
<Linkexactto="/link">
// 받은 url에 따른 component 출력
<Routepath="/link"component={component}>
// 받은 url에 따른 component 출력
<Routepath="/link"render={()=>{<h2>hello</h2>}}>
// as를 사용하면 별명으로 사용할 수 있다.import{BrowerRouterasRouter,Route,Link}from'react-router-dom'
props의 타입을 지정해줄 경우 사용을 한다.
npm install --save prop-types
or
yarn add prop-types
// class 명으로 사용할 경우// 아래처럼 class명 defaultProps를 해준다.// defaultProps는 props가 안넘어올 경우 기본적으로 담아주거나 타입을 지정할 때 사용을 한다.className.defaultProps={propName : propType.string;}
// React에서 event를 발생할 경우// constructor = this.event.bind를 하거나// html에 function 안에 event를 넣어주면 된다menuClickOn=function(menu){console.log(menu);this.setState({menuOn : menu})}<ulclassName="profile-menu"><lionClick={()=>{this.menuClickOn('info')}}>자기소개서</li><lionClick={()=>{this.menuClickOn('project')}}>프로젝트경험</li>
<lionClick={()=>{this.menuClickOn('announce')}}>발표내용</li></ul>
import*asFunfrom'../fun';// 복잡한 계산 공식이나 여러 곳에서 사용될 함수를 지정해서 사용한다.// *는 export 된 모든 것을 가지고온다
componentWillMount()// react 컴포넌트가 실행할 때 제일먼저 실행, 주로 axios를 사용할 때 사용componentDidUpdate()// status or props 변경될 때 사용한다./** axios를 사용하는 방법http의 메소드는get, post, put, deleteRest API의 http 메소드로 사용*/// params를 넣으면 url에 파라메터 데이터가 들어간다axios.get('/url',{params : {id : 1}}).then((response)=>{}).catch((e)=>{});axios.post('/url',{a:1,b:2}).then((response)=>{}).catch((e)=>{});oraxios({method: 'get',url: '/url',responseType: 'stream'})axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}});// axios의 parameter은 url, data(객체), header(객체) 사용하면 된다.axios.get(url,params,header).then().catch(e)
// 글로벌로 선언해서 사용을 할 수 있다.axios.defaults.baseURL='https://api.example.com';axios.defaults.headers.common['Authorization']=AUTH_TOKEN;axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';// axios를 선언constinstance=axios.create({// 기본값을 세팅// timeout을 보통 0초로 지정
baseURL ='https://api.example.com';});// 인스턴스의 모든 요청은 2.5초 간만 대기 후 타임아웃 처리합니다.instance.defaults.timeout=2500;
// React 함수안에 lazy함수가 별도로 있다. lazy란 불리고 나서 사용을 하는 것을 지칭하는데 주로 이미지를 부를 때 사용을 한다// 그래서 js 파일 같은 경우도 컴포넌트가 불린후 lazy를 주로 사용한다.// ex)React.lazy(()=>importaaaafrom'./route/React');
socal login
/** * kakao login 추가 **/npminstallreact-kakao-login/** * google login 추가 * */npminstallreact-google-login/** * facebook login * **/npminstallreact-facebook-login--save--force/** * naver는 따로 지원을 안해줘서 선언을 해야한다. * * 외부 스크립트를 불러내기위한 npm * npm 에 패키지를 찾으십시오. * 내 프로젝트에서 패키지를 다운로드하고 설치하십시오 (npm install typekit). * import 내가 필요로하는 패키지 (import Typekit from 'typekit';) * */<scripttype="text/javascript"src="[https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js](https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js)"charset="utf-8"></script>
ui framework
// with npm
npm install @material-ui/icons // svg 형식의 아이콘 프레임워크 npm
// with npm
npm install @material-ui/core // ui를 그릴수 있는 프레임워크 npm