-
Reactjs 2020‧07‧15
props (부모 컴포넌트에서 자식 컴포넌트로 데이터 전달)
자식 컴포넌트가 부모 컴포넌트로 부터 데이터를 받아와서 처리해야할 경우가 생긴다.우선 부모 컴포넌트에서 자식 컴포넌트 쪽으로 데이터를 전달하기 위해 전달하려는 속성을 추가한다. ChildComp 에 userName 의 값을 'insik'으로 전달했다.이제 자식 컴포넌트인 childComponent.js 를 생성하여 아래 코드를 삽입한다. this.props.userName 을 통해 부모로 받은 값을 노출한다.위 코드 중에는 defaultProps가 있다. 이 것은 부모 컴포넌트에서 props를 전달하지 않았을 때 […]
-
Reactjs 2020‧07‧15
조건문 처리
reactjs 에서 조건문 처리할 때는 삼항식을 사용하거나 자가실행함수 안의 if문으로 처리한다.아래는 컴포넌트 안에 들어갈 코드들이다. 삼항식이 아닌 단순히 단적인 조건에 대한 처리는 아래처럼 한다. 기존에 쓰던 if 조건문을 사용하려면 아래처럼 자가실행함수를 만들어 실행한다.
-
Reactjs 2017‧07‧21
리액트 라우터 v4 와 코드 스플리팅
리액트는 알다시피 한번에 모든 페이지 정보가 스크립트로 들어감. 그러다보니 방문하지 않을 페이지의 코드까지 로드하니 비효율적일 때가 있다. 해당 페이지로 라우팅되었을 때만 그 페이지 코드를 불러오게 해보자. 사용된 모듈은 react, react-dom, react-router-dom 이다. 리액트 라우터는 v4다. app.js (html에서 불러오는 코드 파일이다.) import React, { PropTypes, Component} from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter , […]
-
Reactjs 2017‧06‧21
findDOMNode) is not a function 오류 발생시
import React, { findDOMNode, Component, PropTypes } from 'react'; 이런식으로 findDOMNode 를 한 뒤 참조를 아래처럼 설정할 경우 오류가 날 것이다. const node = findDOMNode(this.refs.input); 리액트 버전 15(일부 제외)부터는 findDOMNode를 쓰지 않고 바로 ref를 사용해도 된다. const node = this.refs.input; 바로 사용해도 된다.