변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()

react 강좌를 보며 예제를 따라해보고 하던 도중

라이프사이클이나 실행유무 어떤 메소드가 먼저 실행되는지

여기에 있는 this와 저기에 있는 this 가 무슨 차이가 있는지

알아보기 위해 여기저기 온갖곳에 console.log를 사용하여

개발자모드 화면에서 콘솔들을 보는 도중

특정값이 바뀌는데도 맵안에 들어가 있는 녀석들을 전부 하나씩

다시 렌더링 한다는걸 알게 되었다

역시나 그에 대한 해답도 강좌에 마지막 부분에 써있었는데

기록해놔야 겠다 싶어서 포스팅을 한다

shouldComponentUpdate

요 함수가 다시 렌더링을 할지 말지 정의를 해주는데 리턴값을 보면

다음 props와 현재 props를 비교 해서 렌더링 할지 말지 정해주는 것 같다.

리턴이 true false로 가니 좀 더 다른 방법으로도 응용이 가능 할 것 같다.

ES6에는 생소한 문법들도 많고 평소 사용하던 방식과 너무나도 많이 달라 

react를 공부하는데 어려움이 엄청나게 많다. 

심지어 나는 bind나 this를 자주 사용하지 않았기 때문에 더 심한것 일수도...

현재 공부중인 리액트 예제들은

https://github.com/cheesu/react-tu

이곳에 올려놨으니 받아서 보는 것도 좋을 것이다.

왜냐하면 주석을 여기저기 엄청나게 달아놓고 console.log도 엄청나게 달아놨기 때문에 

혹여나 관심있는 사람들은 받아보면 도움이 될 것 같다.

react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery )

nodejs사용 babel, webpack 사용하는 사람들에게 적용 가능 한 방법입니다.

다른건 모르겠네요 어차피 여긴 야매 가이드니까 신경 ㄴㄴ

이제 튜토리얼 하고 있는데 세상에 바닐라JS는 나에겐 너무 높은 벽이었고

3년전 처음 배울때나 바닐라 JS 사용했지 실무투입하고 난 이후부턴

제이쿼리만 주구장창 썻는데 getelementById 라니 이건 나에게 너무나 가혹한것 같아

제이쿼리를 어떻게 쓸수 있을까 하고 또 구글링을 시작 했습니다.

역시 인터넷엔 없는게 없었고

이렇게 js에 추가해 주면 사용 할수 있다고 스택오버플로우 형들이 알려주길래

그대로 적용 시켰더니

왜 죽은 동태눈알 색깔을 하고 있는걸까..

unused import $ from jquery 라는 메세지와

메세지창을 확장시키면

checks that javascript or typescript import binding ... 어쩌구 저쩌구

라고 나오면 실행되지 않는다.

아!

npm에서 제이쿼리를 다운받지 않아서 그런건가? 

그렇지 제이쿼리가 없으면 못쓰는거겟지 라는 생각으로

npm install jquery --save

명령어를 입력후 제이쿼리를 설치 했으나

역시 죽은동태눈깔은 돌아오지 않았다.

조금더 구글링을 해보니

이렇게 하면 된다고 한다

오오 신기하다 된다된다

이제 리액트에서 제이쿼리를 사용할수 있겟구나 하고

테스트해보니 

제이쿼리 정상작동 하는 것을 확인 할 수 있었다.

module not found error cannot resolve 'babel' in 에러와 the node api for babel has been moved to babel-core  해결 방법

드디어 리액트에 입문!

아직 뭐가 뭔지도 잘 모르고

바벨이라는 녀석이 ES6문법으로 바꿔주고 웹팩이라는 녀석이 번들js로 

관리해준다는 대략적인 정보만 알고 난 상태에서

https://velopert.com/814

이분의 강좌를 보면서 공부를 하기로 시작 했는데 시작과 동시에 에러가 날 반겨준다.

1. the node api for babel has been moved to babel-core  해결 방법

<으아악 불길한 붉은 텍스트라니>

the node api for babel has been moved to babel-core

이 에러는 뭐 대충 설치 할때 경로 문제나 디펜던시 설정 문제 인듯 하다

pakage.json 파일의 디펜던시를 아래와 같이 바꿔주면 해결이 된다.

아마 위의 에러가 나는 것은 딘펜던시와 덴펜던시스 둘다 바벨이 들어가 있는 경우이며

글로벌로 babel과 webpack를 설치 한 후

또 종속성으로 --save 명령어로 설치하는 경우에 나타나는 에러 인듯 하다.

디펜던시 목록을 위와같이 수정해주면 사라지며

그래도 계속 나타날 경우엔 어차피 튜토리얼 단계니까 

폴더 지우고 다시 순서대로 받아주면 해결 된다.

2.module not found error cannot resolve 'babel' in 에러 해결 방법

이 에러는 webpack.config.js 파일을 수정해 주어야 한다.

이 파일은 webpack의 설정파일인데

ECMAScript6를 컴파일 해주고 개발서버를 열어주는 webpack의 설정 파일인데

모듈 로더 부분이

이런식으로 loader:'babel'

로 되어있는 경우 발생한다

바벨을 참조하지 못해서 생기는 오류인듯 한데

loader:'babel' -> loader:'babel-loader' 이렇게 바꿔주면 간단히 해결이 된다.

이제 npm start 명령어를 실행하면 complied successfully 라는 반가운 문구를 볼 수가 있게 된다.