-
Reactjs 2017‧05‧12
스니펫용 함수형 컴포넌트 코드
import React from 'react'; const myFunc = () => { return( <div></div> ) } export default myFunc; state가 없거나 리액트 라이프 사이클에 관계없는 컴포넌트 만들 때 사용.
-
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‧21
React - 02. 코딩하기 - 컴포넌트
리액트는 컴포넌트를 만드는게 중요하다. 컴포넌트... 막상 이렇게 말하니까 개념적으로 이해하기 어려웠었다. 컴포넌트란 웹 코딩으로 설명하자만, 네비게이션이 있는 영역도 컴포넌트이고 검색 기능이 있는 부분도 컴포넌트다. ul로 감싸진 목록들도 컴포넌트로 만들 수 있고, 로그인 부분도 컴포넌트로 만든다고 생각하면 된다. 그냥 다 컴포넌트들로 모여져 웹사이트를 만든다 생각한다. 지난 번에(http://bongsunga.com/blog/3478) 만든 webpack.config.js 를 열어보면 output : 이란 곳이 있고 […]