꿀팁 저장소

리액트로 큰 프로젝트를 진행하다보면 페이지 진입 후 로딩속도가 길어지는 현상을 겪게된다.

리액트의 구조적인 문제로, 모든 파일이 번들링되어 index.html포함되기 때문이다.

이에대한 해결책으로 많이 언급되는것들이있다.

그 중에서 Code-splitting을 통한 로딩속도 향상 방법을 소개한다.

특히, 가장 간단하면서도 react에서 기본으로 지원해주는 기능을 이용하도록 하겠다.(v16이상)

바로, 리액트의 Suspense와 lazy이다.

간단하게는 Route에서 각 페이지 컴포넌트들을 lazy로딩하는 구조를 취한다.

다시 말하면, Switch를 통해 페이지 컴포넌트가 요청될때 해당 컴포넌트를 import하는 구조이다.

기본적인 사용법도 매우 간단하며 Docs도 아주 깔끔하게 잘되어있다.

[React Docs] https://ko.reactjs.org/docs/code-splitting.html

위의 문서에보면 하단부에 잘 나타나있다.

import React, { Suspense, lazy } from 'react';
...

const Home = lazy(() => import('./pages/home'));
const Profile = lazy(() => import('./pages/profile'));

...


const App = ({}) => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>...loading</div>}>
        <Route exact path='/' component={ Home } />
        <Route path='/profile' component={ Profile } />
      </Suspense>
    </BrowserRouter>
  )
}

대략, 이처럼 사용할 수 있다.

작은 프로젝트에서는 그 효율이 낮을수있으나 프로젝트가 커질수록 크 효율이 높아지는것으로 보인다.

해당 소스를 적용하는게 어렵다거나 시간적으로 오래걸리는것도 아니니,

처음부터 구조를 잘 갖춰나가면 될것같다.

(작은 프로젝트에서 Lazy를 적용함으로써 생기는 문제/단점이 있다면 댓글 부탁드립니다... 궁금해서요)

React 개발을 하다보면 전역적으로 상태관리를 해야할 때가 온다.

작은 시스템일수록 그럴일은 없지만,

시스템이 커질수록 쓸일이 생기기 마련이다.

그렇다고 프로젝트 초기부터, 이게 커질지 아닐지도 모르는데 Redux와 같은 상태관리 시스템을 도입하자니,

코드가 길어지고 상대적으로 개발시간이 다소 길어지는 것을 감수할 필요는 없다는 생각이 든다..

이 때, 딱 적당한것이 Context API인것같다.

처음부터 세팅해두고 시작할필요없이 (프로젝트 구조와 거의 무관하게) 쉽게 적용하여 쓸 수 있다.

이미 짜둔 코드에 몇줄 얹으면 끝이다.

시작에 앞서, context가 무엇인지 설명하자면 Consumer와 Provider를 통해 글로벌하게 state를 관리하는 도구이다.

이게 무슨말이냐면, 아주 유용한 연필을 하나 만들어두고 누구든 원하면 쓸수있게 Provider를 통해 연필을 전체적으로 공급한다.

그리고, 누구든 연필이 필요한 녀석(component)은 Consumer를 통해 그 연필을 가져다 쓸수있다는 말이다.

코드의 중복이나 상속의 상속의 상속...같은 낭비를 하지않을수 있으니 매우 유용하다고 볼수있다.

그러면 가장 기본적인 사용법을 알아본다.

import React, { creatContext } from 'react';

const { Provider, Consumer } = createContext();

class ItemProvider extends React.Component {
	state = {
    	item: null,
    }
    
    actions = {
    	onClear: () => {
        	this.setState({ item: null });
        },
        onGotTool: (tool) => {
        	this.setState({ item: tool })
        }
    }
    
	render() {
	    const { state, actions } = this;
        const value = { state, actions };
    	return(
        	<Provider value={ value }>
            	{ this.props.children }
            </Provider>
        )
    }
}

const ShowItem = () => (
	<Consumer>
    {
    	({ state, actions }) => (
        	<div>
            	<div>
                	<span>나의 도구: </span>
	                { state.item }
                </div>
				<div>
                	<p onClick={() => { actions.onGotItem('Hammer'); }}>도구 획득</p>
                </div>
            </div>
        )
    }
    </Consumer>
)

class App extends React.Component {
	render() {
    	return (
        	<ItemProvider>
            	<div><ShowItem /></div>
            </ItemProvider>
        )
    }
}

const data = 'hello\nworld'
{
  data.split('\n').map(word => {
    return (<span>{ word }<br/></span>)
  })
}

create-react-app, 통칭 CRA는 2018년 부터 IE에 대응하지 않는다고 선언했다.

실제로 CRA로 만든 프로젝트를 IE에서 실행시키면 화면에 아무것도 노출되지 않는다.

대한민국에 사는 우리는 IE에서도 서비스를 해야만한다...

IE에 대응하는 방법은 의외로 간단하니 알아두자.

// 모듈 설치
npm install react-app-polyfill


// index.js - 1번째줄  (반드시 1번째 줄 부터 설정)
import 'react-app-polyfill/ie9'
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'
...


// package.json
{
  ...
  "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all",
        "ie 9"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 9"
      ]
   },
  ...
}

React에서 Redux를 함께 쓰다보면, 혹은 React를 사용하다보면

불변성과 관련하여 종종 맡닥드리는 문제상황들이 있다.

불변성 관리의 편리함을 제공해주는 immer, immutablejs 등이 있는데,

그것들을 사용하더라도 javascript에 대한 이해도가 떨어지면 결국 문제상황과 만나게된다..

특히, array..object..array.. array..와 같은 깊은 구조에서 문제가 발생한다.

이때, 한가지만 명심하면 해답을 찾을 수 있다.

"값을 직접 바꾸지 마라" 라는 react의 철학이다.

위와같이 깊고 복잡한 구조에서는 arr['something']['action']['whatIndex'] = value;

와 같이 값을 직접 변경할것이 아니라

splice등과 같은 array method를 이용하도록 하자.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

보통 react에서 rest api를 통해 작업을 하게된다.

만약 나 또는 내 그룹에서 작업하고있는 rest api 서버라면 문제없지만

firebase, kakao, naver 등의 rest api를 이용함에있어 cors문제를 한번쯤 겪게된다.

chrome에서 보안 정책상 기본적으로 cors를 방지하고있기 때문이다.

이럴때는 chrome확장도구 중 "CORS:Allow CORS: Access-Control-Allow-Origin"라는 확장도구가있다

요놈을 설치해 ON해주면 문제없이 테스트를 진행할 수 있다

(이놈 때문에 무려 6시간을 삽질했다)

그런데,

중요한것은 사실 저것이 아니다.

클라이언트(웹 브라우저)에서 Reat API를 서버로 요청할때는 axios, fetch등이 아닌 a태그의 href를 이용해야한다.

query parameters들을 href="...url?accessToken=something ...." 과 같이 해서 요청하면 된다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

react / redux 환경에서 처음 개발하다보면 당황스러운 경험을 하게된다.

state에 값을 담기위해 onChange에서 setState 할때마다, 

re-rendering되면 input에서 focusout되는 것이다.

도저히 값을 입력할수가없다.

상황은 매우 난감하지만 해결방법은 매우 간단하다.

해당 input이 속한 컴포넌트 wrapper에(제일 바깥 껍데기) key를 주는것이다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

react-router-hash-link를 사용하면 아주 쉽고 빠르게 구현해볼수 있다.

import { hashlink } from 'react-router-hash-link'

<HashLink to='/#something' scroll={el => el.scrollIntoView({ behavior: 'smooth', block: 'end' }) }>

...

</HashLink>

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

react에서 state는 immutable하게 쓰여야 한다고 얘기한다.

이것은 무슨말인가.

간단한 예시를 통해 쉽게 확인해보자

state={ lucky_number: 7, };

이와같이 state가 설정되어 있을떄

this.state.lucky.number = 4

혹은

this.state.lucky_number += -3

과 같이 값에 변화를 주는 행위를 하면 안된다는 말이다.

그렇다면 lucky_number의 값을 바꿔주려면 어떻게 해야할까 ?

this.setState({})를 통해 새로 값을 업데이트 해줘야한다.

this.setState({ lucky_number: 4});

or

this.setState(prevState => ({

  lucky_number: prevState + 3

}});

이러한 방식이 react에서 제시하는 올바른 state 관리라고 할 수 있다.

그렇다면 state중 object가 있다면 어떨까

state={

  firend: {

    phone: 99,

    age: 12,

    birth: 0011-02-02

  }

};

이런 상황에서 prevState를 통해 phone넘버를 정상적으로 갱신해주고 싶다면?

this.setState(prevState => ({

  friend: {

    ...prevState.friend, // 혹은, ...this.state.friend

    phone: 010-0000-1111

  }

}));

react-scripts > fsevents@2.0.6: Please update: there are crash fixes

create-react-app이 정상적으로 설치되어 있는 상황에서,

프로젝트 생성도중 위와 같은 에러가 뜬다면 패키지매니저들간의 충돌로 발생한 문제일수있다

다음과 같이 해결할 수 있다.

create-react-app myproject --use-npm

or

create-react-app myproject --typescript --use-npm