-
Reactjs 2020‧07‧15
컴포넌트 안에서 method 호출 or arrow 함수 호출 (feat. this 이슈)
예를 들어 클릭 이벤트에 state 의 값을 변경하려고 함수 호출하거나 메서드를 호출한다.ES6 문법의 arrow 함수 방식으로 호출할 경우는 증가 버튼을 클릭하면 onClick으로 handleInc 인 arrow 함수 호출하여 state 값을 변경하는 예제였다.이 것을 ES6 문법이 아닌 예전 방식으로 코딩하면 아래와 같다. constructor 안에서 이벤트 메서드를 this.handleInc = this.handleInc.bind(this); 이런식으로 this를 바인딩 해줘야한다.그렇지 않으면 number 가 undefined […]
-
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‧07‧21
코드 스플리팅을 위한 webpack.config.js , 패키지들
이번에 webpack3, react router v4로 접하면서 코드 스플리팅을 위한 작업을 했다. 설치한 패키지들은 package.json으로 파악하고 설치하면 된다. package.json 의 설치 모듈들 devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "express": "^4.15.3", "html-webpack-plugin": "^2.29.0", "webpack": "^3.3.0" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-router-dom": "^4.1.2" } webpack.config.js const webpack = require('webpack'); […]
-
Reactjs 2017‧06‧22
react REDUX - connect 유무에 따라 리듀서 안의 값 가져오기
export default connect( mapStateToProps, mapDispatchToProps )(스마트컴포넌트) 이런 식으로 스마트 컴포넌트를 연결할 것이다. 만약 connect를 쓰지 않고 스마트 컴포넌트 안에서 리듀서안의 state 를 가져오려면 this.props.store.getState().리듀서이름.키 위 처럼 쓰게 되고 connect를 사용했을 경우에는 this.props.키 이렇게 가져올 수 있다.
-
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; 바로 사용해도 된다.
-
Reactjs 2017‧05‧29
JSX - 마우스 오버/아웃 효과
마우스 오버와 아웃 효과에 따른 스크립트를 작성할 때 아래와 같이 JSX에서 엘리먼트 안에 넣어 주면 된다. <img src='icon.jpg' onMouseOver={(event) =>{ 마우스 오버시 스크립트}} onMouseOut={(event) => { 마우스 아웃시 스크립트 }} /> 바로 스크립트를 작성해 넣지 않고, 작성된 컴포넌트 안에 선언한 인수를 실행할 수도 있다. <img src='icon.jpg' onMouseOver={(event) =>{ this.handlerOver(event);}} onMouseOut={(event) => { this.handlerOut(event); }} /> […]
-
Reactjs 2017‧05‧24
props가 변경되어서 state를 업데이트(setState) 할 때
자식 컴포넌트가 부모로 받은 props 의 값들이 변경되었다. 변경됨을 감지하고 자식 컴포넌트안의 state 값을 변경(setState)하여 자식 컴포넌트 안의 함수 실행 또는 변수 정의를 그에 맞게 재실행하고 할 때가 있다. componentDidUpdate(prevProps, prevState){ if (this.props.tagList !== prevProps.tagList) { console.log('업뎃?') this.setState({ ...this.state, selectTagNum : -1 }) } } 이렇게 하면 props.tagList라는 값이 변경이 되었다면 this.state 안에 selectTagNum 은 […]
-
Javascript, jQuery, Reactjs 2017‧05‧18
Webpack + React 그리고 SCSS 컴파일해서 CSS 넣기
모듈 설치 npm install --save-dev style-loader css-loader sass-loader node-sass cmd를 실행해서 프로젝트 디렉토리로 이동하여 npm으로 모듈들을 설치하자. 이제 아래 두가지 방식 중 선택하여 작업한다. 1. .css 파일을 뽑아내지 않고 React에 담는 방식 2. .css 파일을 따로 만들어서 직접 html 안에 담는 방식 (<link rel="stylesheet" ... > 태그로 흔히 우리가 기본적으로 사용하는 그 방법) 1번 방식은 […]