[React] Typescript + SCSS 환경 만들기
React실제 프로젝트에서 사용을 안하다보니 자꾸 처음 내용이 익숙해 지지 않은 상태에서 잊어버리고 만다. React + Typescript + SCSS 기반을 다시 구축해 본다.
Install React with Typescript
// 2018.9 현재 LTS NodeJS 버전
$ nvm use 8.12.0
// typescript v3.0.3 으로 업데이트
$ npm i -g typescript
$ npm i -g create-react-app (or yarn global add create-react-app)
$ create-react-app my-app --scrips-version=react-scripts-ts
package.json에 eject기능이 있어서 webpack config를 밖으로 추출하여 직접 핸들링할 수 있게 한다.
$ cd my-app
$ npm run eject
SCSS 환경구축
css 환경을 scss 환경으로 바꿔준다.
// scss loader 설치
$ yarn add node-sass sass-loader --dev
App.css와 index.css의 확장자를 .scss로 바꾸고, App.tsx, index.tsx의 import 문 확장자를 .scss로 바꾼다.
import './App.scss';
config/webpack.config.dev.js 와 webpack.config.prod.js 파일안에 scss설정을 추가한다. 빨간 부분을
{
test: /\.(css|scss)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve("sass-loader"),
options: { }
}
],
},
기존 App.scss내용을 다음과 같이 바꾸어 확인해 본다.
.App {
text-align: center;
&-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
&-header {
background-color: rgb(197, 40, 40);
height: 150px;
padding: 20px;
color: white;
}
&-title {
font-size: 1.5em;
}
&-intro {
font-size: large;
}
}
yarn start하여 점검!
Component LifeCycle
일반 컴포넌트
constructor -> componentWillMount -> render -> componentDidMount -> componentWillUnmount
props, state 사용 컴포넌트
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
- shouldComponentUpdate: true, false로 다음으로 이벤트를 넘길수도 안할수도 있음
Component Type
PureComponent
shouldComponentUpdate에서 Shallow compare하므로 reference를 바꾸어 주어야 render가 호출됨.
Functional Component (Stateless Function Component)
const myComp: Reat.SFC<Props> = (props) => {...}
import * as React from“ react”
interface WelcomeProps {
name: string,
}
const Welcome: React.SFC < WelcomeProps > = (props) => {
return <h1 > Hello, {
props.name
} < /h1>;
}
Router for SPA
react-router v4
BrowserRouter, Route, Link, NavLink, Redirect 사용
BrowserRouter는 window.history.pushState() 로 동자하는 라우터
RouteComponentProps: route되면서 url의 파라미터를 props로 받음. history, match 속성을 가짐.
<BrowserRouter>
<Route exact={true} path="/" component={} or render={} or children={} >
<Link to="/a" />
<NavLink activeStyle={{ color: red }} to="/b" />
</Route>
<Redirect from="/a" to="/b" />
</BrowserRouter>
Switch로 감쌈
<Switch>
<Route ... />
<Route ... />
<Route ... />
</Switch>
Redux
react-redux
여러 action을 reducer를 통해 하나의 store를 만든다.
- action 타입을 만들고 action 객체를 만드는 펑션을 (action creator) 정의한다.
- action을 처리하는 reducer 펑션을 정의한다. (Pure function, immutable)
reducer 펑션을 action별로 나눈 다음 사용시에는 combineReducers 로 합쳐서 사용한다.
- reducer를 createStore에 넣어주면 single Store가 만들어진다.
store에는 getState(), dispatch(액션), subscribe(리스너), replaceReducer(다른리듀서) 4개 메소드가 있음
redux를 react에 연결하기
- componentDidMount: subscribe
- componentWillUnMount: unsubscribe
- Provider는 context에 store를 담아 모든 component에서 store를 사용할 수 있도록 한다.
Provider를 제공하는 react-redux를 사용한다.
connect를 통해 컴포넌트에 연결한다.
- App에 대한 High order component이다.
- 전체 state의 모양과 action creator를 파라미터로 넣어준다.
$ yarn add redux react-redux @types/redux @types/react-redux
const mapStateToProps = (state: { age: number}) => {
return {
age: state.age
}
}
const mapDispatchToProps = (dispatch: Function) => {
return {
onAddAge: () => { dispatch(addAge()); }
};
}
interface AppProps {
age: number;
onAddAge: void;
}
connect(mapStateToProps, mapDispatchToProps)(App);
class App<{props: AppProps}> extends Component {
return <div>{this.props.age}</div>
}
dispatch안에서 async처리를 할 수 있다.
applyMiddleware는 dispatch 전후에 처리할 수 있다.
action이 async일 때 미들웨어인 redux-thunk를 이용한다.
<참조>
- 2017 Typescript Korea 강의 (유튜브)
- scss loader 설정하기, Class 사용 in Velopert
