-
Reactjs 2017‧05‧17
JSX - 엘리먼트를 단순 조건에 따른 렌더
JSX 상에서 조건문을 길게 쓰지 않고 단순하게 엘리먼트를 렌더링 할때 사용한다. 특히 true/false와 같은 조건으로 React 엘리먼트를 렌더할 때 편하다. <div> { this.state.logined && <Profile /> } </div> this.state ={ logined : true } 이면 <Profile /> 엘리먼트가 렌더 된다. <Profile /> 대신에 html 엘리먼트를 넣어도 된다. (<img src="./test.jpg" /> 이런 거) 공식 문서 […]
-
Reactjs 2017‧05‧12
스니펫용 함수형 컴포넌트 코드
import React from 'react'; const myFunc = () => { return( <div></div> ) } export default myFunc; state가 없거나 리액트 라이프 사이클에 관계없는 컴포넌트 만들 때 사용.
-
Reactjs 2017‧04‧28
스니펫용 기본 컴포넌트 코드
컴포넌트 만들 때 스니펫으로 등록하려는 용도로 만든 기본 템플릿이다. import React, { PropTypes, Component} from 'react'; const defaultProps = { } const propTypes = { } export default class 컴포넌트이름 extends Component{ constructor(props){ super(props); } render(){ return( <div></div> ) } } 컴포넌트이름.defaultProps = defaultProps; 컴포넌트이름.propTypes = propTypes;
-
Reactjs 2017‧04‧24
ReactJs - .propTypes, .defaultprops
prop 를 타입 선언과 기본 값 셋팅을 할 때 대소문자 주의해서 쓰자. const로 먼저 셋팅 선언하고, 하단에 실제 타입과 기본값 선언을 상단에서 설정한 셋팅값으로 가져온다. import React from 'react'; const propTypes = { number : React.PropTypes.number } const defaultProps = { number : -1 } class Value extends React.Component { constructor(props){ super(props); } render(){ return( […]
-
Reactjs 2017‧04‧24
ReactJs - 자동으로 프로젝트 생성/셋팅
이런 저런 설치와 설정없이 바로 리액트 프로젝트를 만들수 있게 해주는 플러그인이다. 참고 문서는 https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html CMD 창에서 아무곳에서나 아래처럼 입력하여 글로벌로 설치한다. npm install -g create-react-app 이게 설치가 되면 이제 기본 리액트 셋팅이 된 환경을 만들어줄 수 있다. CMD 로 작업하려는 디렉토리에 가서 아래처럼 입력하자. create-react-app testreact 그러면 testreact라는 폴더가 생긴다. 그 안에 모두 셋팅되어 있으니 […]
-
Reactjs 2017‧04‧24
리액트에서 리스트 반복으로 버튼 만들 때 .map()
const makeLi = (data) => { return data.map((getdata, i) => { //jquery each 처럼 getdata로 들어온걸 i로 반복시킴 return( <ContactinforLi contact={getdata} key={i} onClicks={()=>{this.handClickA(i)}}/> ) }) //data.map } // const makeLi render(){} 안에서 작동시켜서 ContactinforLi 컴포넌트들이 반복적으로 랜더링 되게 한다.
-
Reactjs 2017‧04‧24
Immutability Helpers 간단 사용법
배열이나 객체 수정/추가/삭제를 용이하기 위한 리액트 플러그인. 공식 문서 : https://facebook.github.io/react/docs/update.html 문서내 선언 import update from 'react-addons-update'; 예를 들어 setState할 때 쓰려면 아래처럼 쓴다. handleCreate(contact){ this.setState({ getJsonData : update(this.state.getJsonData, {$push : [contact]}) //update(타겟배열,{$push [추가할 것=받아온것]}) }) }; handleRemove(){ this.setState({ getJsonData : update(this.state.getJsonData, {$splice : [[this.state.selectedkey, 1]]}), //update(타겟 배열, {$splice : [[배열의 순번, 그로부터 어디까지 지울지]]}) selectedkey […]
-
Reactjs 2017‧04‧21
React - 02. 코딩하기 - 컴포넌트
리액트는 컴포넌트를 만드는게 중요하다. 컴포넌트... 막상 이렇게 말하니까 개념적으로 이해하기 어려웠었다. 컴포넌트란 웹 코딩으로 설명하자만, 네비게이션이 있는 영역도 컴포넌트이고 검색 기능이 있는 부분도 컴포넌트다. ul로 감싸진 목록들도 컴포넌트로 만들 수 있고, 로그인 부분도 컴포넌트로 만든다고 생각하면 된다. 그냥 다 컴포넌트들로 모여져 웹사이트를 만든다 생각한다. 지난 번에(http://bongsunga.com/blog/3478) 만든 webpack.config.js 를 열어보면 output : 이란 곳이 있고 […]
-
Reactjs 2017‧04‧21
React - 01. 준비하기
완전 처음 접한다. 들어는 보았지만 어떻게 시작해야할지 찾아다니면서 엄청 해맸다. 내가 생각하기엔 결론은 두가지 방법이다. 중요한건 ES6, JSX다. 실서버에 올려놓고 ES6와 JSX를 변환을 하느냐? 아니면 올려놓기 전에 변환하고 올리느냐 라는 방식으로 난 구분했다. 올려놓고 번들링 하는 방식의 구축 방법은 http://yumere.tistory.com/78 그렇지 않고 로컬에서 npm으로 번들링하여 완성하고 구축하는 방법은 https://velopert.com/814 이렇게 두가지 방식으로 난 구분을 했고, 후자의 방식으로 […]