시간 없는 React 초보자 진입기 - 1

ES6에 대한 어느정도의 기초적인 이해를 밑바탕으로 React를 들어간다.

진입장벽이 높았다. 먼저 선행 학습 준비했던 언어와 기능들이다.

언어 및 컴파일 연습

es6, typescript, eslint(eslint-config-airbnb-base, es6 모드), babel, babel-preset-env(es2015,react) 순이다.

빌드 툴, 테스크러너 연습

webpack3, glup

패키지 매니저 연습

npm

테스트 매니저 연습

glup+mocha, webpack+react+jest

위 순서대로 나열한 이유는 React 랙트 공식 홈페이지에서 위 3요소에 대한 형태를 활용하여 만드는 사람들에게

유용하다는 말 한마디 때문이였다.

위 이야기는 결국 하기 내용을 이해한 사람에게 도움이 되는 프론트엔드 프레임워크라는 뜻

1. 프로젝트를 진행하기전에 적어도 패키지매니저 활용, 컴파일링, 트랜스파일링에 대한 이해가 있는가.

2. 새 ECMA에 대한 언어적 이해와 사용과 쓰임에 대한 것을 알고 있는가.

3. 빌드툴을 확실히 이해하고 있는가. 적어도 현재 프로젝트가 테스크 러너는 활용하는가.

얼마나 투자해야하고 마음을 비워야하냐 물으신다면, 과거 개발 스타일에 따라서 편차가 좀 있을 것 같습니다.

계속 만들어보면서 하나씩 쓰임과 역할을 과거의 툴들과 비교해보면서 체험하시면 되겠습니다.

참고로 Editplus 하드코더 입장에서는 상당히 애먹었습니다. (일주일정도..)

---

이제, 중요한 것들만 잊어 먹지 않게 비유하며, 기능과 역할들을 요약해서 적어보자.

1편, 초보자 이제 진입합니다.

ES6를 기반으로 짜여진 JSX 템플릿

JSX 이해하기

PHP로 비교하면, HTML로 짜여진 파일을 A.html 이라고 가정하자. 

나는 오랜된 PHP 개발자로서 a.php 파일로 만들어두는 습관이 있었다. 

개발했던 느낌을 그대로 가져와 본다면, jsx 템플릿은 아직 컴파일 되지 않은 php 파일 그대로를 의미 한다.

php는 파일 요청이 있을 때 php compiler가 읽고, html 데이터로 변환 후 apache http 에게 데이터를 넘겨주듯.

react에서도 같은 역할을 하는 녀석이 있다.

PHP보다는 약간 복잡한데, 어렵게 생각하지 말자. 순서는 이렇다.

jsx파일로 컴파일 될 템플릿 - babel이라는 es3로 바꾸어주는 친구에게 이 jsx파일을 넘긴다.

넘기면, babel-preset-react 라는 친구가 babel에게 이렇게 바꾸어줘라고 던지는데 느낌상

jsx - es6 - es3 변환 단계를 거친다. 

바로 babel-preset-react 라는 친구다. 물론 babel-core와 함께 쓰게 된다.

쌍팔년도 개발자들과 함께하기 위해서, 비유 한다면

babel-core가 플로피 디스켓 슬랫이라면, babel-preset-react를 넣고 쓰는 개념이다.

jsx->es6 js->es3 js 단계를 거치면서 작업한다.

js파일 단독적으로 html을 표현하진 않는다 단지 대상이 될 웹페이지에 선처리한 데이터를 가지고, dom트리를 바꾸는 작업을 하도록 구성된 언어규칙일 뿐이다.

JSX 문법

jsx의 문법은 react 공식 홈페이지에서 손쉽게 배울 수 있고, 템플릿을 작성하는 방법은 본디 본대로 규칙성을 따르면 되겠다.

받아드리는게 거부감 있다. 하지만 이렇게 이해하자. 이태껏 html도 템플릿이 있었는데, javascript도 템플릿이 생겼다고.

JSX 자주 띄는 용법

혼자 독립적으로 사용을 못한다. 그나마 할 수 있는게 정적 검사인데 아래 설명하겠다.

 

요즘 컴포넌트식 개발을 하는 쪽으로 모두 가닥이 잡힌 이유와 당위성은 오래된 개발자들은 크로스웹브라우징이라고 하면 이해하고

그보폭보다 넓은 Universe Application 제작을 위한 한걸음으로 이해하라는 쪽으로 페이스북이 개발자들에게 설득시켰다.

- Native App, Desktop App, Mobile Web App, Desktop Web App를 통합적으로 보여주자라는 UI 시대 정신 정도가 되겠다.

그래서 용법이 조금 바뀌었는데,

정적 검사 개발

VSCode와 같은 에디터툴에서 쓰는 디버깅 검사, 프로젝트 내에서 하는 정적 검사 개발 방식이라는 용어가 좀 생겼고..

이는 VSCode나 Atom에서 확장툴에서 설치하면된다 React방식이라면 그거 문법적 검사좀 해주십시요하고 추가확장 기능을 설치하면 되겠다.

https://reactjs.org/docs/static-type-checking.html 참고하면 좋다.

플로우, 테스크, 유닛 검사 개발

Mocha, Jest, Postman과 같은 툴을 통해서 Router에 값을 보내면서, 테스크, 유닛 따위의 단위로 나누어 테스트를 하면서 개발하는 용어도 생겼고..

Loader, Server Side

PHP에서는 당연한 논리인데, javascript에서는 Server Side가 애초에 아녔으니, 이부분에 대해서 되게 강조한다.

뭐, 영역을 침범하였다는 개념에서 그렇다는 건데.. 역사적이긴해도 next.js와 같은 또 다시 Layout 방식으로 혁신성을 강조하고 나섰다.

이점은 React의 치명적인 불편함이라 말할 수 있겠다..(피차 RestAPI형+ Front End 개발 구조의 숙명 아닐까 싶다)

JSX 템플릿 잊지 말아야하는 점

1. 함수에게 넘긴 인자는 반드시 읽기전용이여야 한댄다.

- 절대로 절대로 넘기지 말랜다.

- 상향식 구조를 띄는 상위 구조에서 썼던 변수를 레퍼런스 참조로 변형해서 쓰지말라는 부분

2. React.Component로 상속 받은 내가 직접 만든 컴포넌트들은 반드시 하기 내용을 지켜가면서 써야한단다.

- 상속자 함수

constructor(...rest){ super(...rest) }

- props 를 유심히보고,

class가 className인 것을 제외하고는 괜찮다.

좀 놀라웠던 점은 상위 Commponent에서 하위 컴포넌트에 템플릿을 전달하는 역할을 하는 props.children 기능이 희대 jsx를 반갑게 여기게 하는 기능으로 느껴졌다. (https://reactjs.org/docs/composition-vs-inheritance.html)

- 상태변경

state.name = 123 <---  이렇게 다이렉트로 바꾸려하지말기

setState라는 함수를 써주고, 이는 잘 오버라이팅되니 최대한 활용하랜다.

단! 하위 개체로 갈 수록 state를 써주기 보다는 props를 최대한 활용해줄 것을 권고하고 있다.

- 랜더링 없이 Return 할때 반드시 null 처리해주기

- EventHandler 를 쓸땐 Es5에 규칙성이 정해진 .bind(this)로 global(window)바라보는 것을 되잡아주기

- Array, Object 와 같은 es5의 추가적인 iterate 될 수 있는 기능들을 활용하여 수월하게 데이터 처리해주기(최적을 위해서인가보다)

- componentDidMount, componentWillUnmount 와 같은 React.Component를 자주 이용하여, 혹시 그안에서 쓰는 setTimeout, setInterval의 남용과 메모리 누수를 최대한 적게하라는 말이 있었다.

어렵게 바라보지 말고, 이전에 XpressEngine에서는 Trigger와 같다.

가. commponent 와 같은 단어는 생각말고, 앞으로 일어날 일이라면 will, 처리가 끝난 상태는 did로 단어를 결정하였고

RecivedProps, Update, DidUpdate, WillUnmount, DidMount 이런식으로 구성되어 있다.

즉 상태는 recived, did, will

단계는 props, update, mount, unmount 이런식으로 있다는 것을 유념하자

3. es6의 구문적 역할들을 왠만한건 차용했으니 쓰라.

- 대표적인게 조건문, 인라인조건문(로직오퍼레이터방식, 3항연산자방식)이 대표적인 예

- 그외 내용은 https://reactjs.org/docs/jsx-in-depth.html

  (한장으로 잘 정리해줬다)

4. 왠만하면 캐피탈(앞대문자)형태와 캐멀케이스 방식으로 작성해달라.

- 해달라 해달라한다. 즉 javascript template일지 언정, 이것은 자바스크립트로 포팅 될 예정이기 때문에 가급적 캐멀케이스로 작성해달라는 리엑트 공식홈페이지 권고문구가 있다.