-
Reactjs 2022‧04‧20
react jsx 스타일을 조건 넣어 인라인으로 처리
기존에 리액트로 작성할 때 인라인으로 스타일을 넣고 조건에 맞춰 값을 넣은 적은 있었다. 예를들어 state 에 abc 값이 있으면 0, 없으면 100%의 width로 지정한다고 할 때, 이렇게 쓸 수 있다.그런데 이렇게 되면 강제로 width를 꼭 이 곳에서 처리되게 된다. 다른 css 파일들에서 이 영역에 스타일을 붙였다면 그 스타일들은 무시되고 위에 인라인으로 처리된 것이 적용될 것이다. […]
-
Reactjs 2021‧04‧09
`value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
리액트에서 input 요소에 value 값을 데이터를 가져와 넣는 형식으로 구성했다면 콘솔에 아래와 같이 오류가 빨갛게 뜬다. 그래도 번들링은 이상없이 된다. 그렇지만 우리는 이 빨간색이 저주스럽지 않은가? 당연히 없애고 싶은 개발자의 마음이니까~ 이렇게 코드를 작성했는데 value에 보면 this.state.companyCode 값을 가져와 넣도록 되어 있다. 바로 이 부분이 잘못된 것이다. 없을 경우에 대해서도 처리를 해주자 value={this.state.companyCode} 를 value={this.state.companyCode […]
-
Reactjs 2021‧01‧07
react, vue - Uncaught SyntaxError: Unexpected token < (흰 화면 이슈)
매번 SPA로 프로젝트를 진행할 때 마다 나를 괴롭히는 에러 메시지 ㅠUnexpected token '<' 지금까지 vue.js 로 구축하거나 react.js 로 구축하여 프로젝트를 번들링 후 배포하고 나면 종종 발생하는 에러라서 이 것 때문에 많은 대응책을 마련해 왔다. 원인을 살펴 보자면 배포하고 접속하면 index.html이 브라우저의 캐시 상태이기 때문에 배포 바로 이전 버전의 index.html 이다. 그 안에 번들링한 js파일을 […]
-
Reactjs 2020‧10‧27
iOS에서 뒤로 가기 전환시 스크롤링 포지션 이슈 (route, scrollTop)
최근에 react.js 로 구현된 어플리케이션에서 페이지 이동 후 뒤로 가기 위한 행동을 하면 스크롤 포지션이 엄하게 바뀌는 경우를 대처하기 위해 이런 저런 방법을 찾아 본 뒤 원인을 찾게 되었다. iOS에서 앵커 태그(a) 가 아닌 이동일 경우에 생기는 이슈인 듯 하다.예) this.props.history.push('/main');리액트 라우터를 이용해 페이지가 전환되었을 경우 생기는 데 기존 프로젝트에 보니 route에 scrolltop이라는 컴포넌트를 보고 […]
-
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‧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; 바로 사용해도 된다.