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

React, ReactRouter, Redux

이렇게 3가지로 학습 커리큐럼을 잡았다.

위 항목을 학습 커리큐럼으로 잡은 이유는

1. React : 브라우저 내에서 상태값과 랜더링 최적화를 통한 페이지 이동 및 접근, 랜더링 속도를 빠르게 하기 위함이요.

위 내용은 1일차 React 가이드와 튜토리얼을 보고 따라해보았고, 메모하면서 갔다. 이번 주말에 복습하자 헬로우 크리스마스...

2. ReactRouter/ReactRouterDOM : 샤샤삭 이동을 한 것처럼(?) 서비스를 해주기 위함이요.

2-1. React/Server + ReactRouterDOM : 데이터를 또 따로 받아서 처리해야하는건 서버 사이드 처리하여 다시 전달하기 위함이요.

3. Redux : 2번이 복잡하게 하지 않도록 규칙을 잡아두고, 개발하는 방식

3-1. React/Server + ReactRouterDOM + Redux : 그 규칙을 서버사이드처리에서도 함께 하기 위함이요..

1,2,3 위 각 항이 마무리가 되면

jest, flow, gulp

통해서 손쉽게 개발의 환경과 개발 단계를 나눌 필요성이 있다.

그다음으로는... 하아.

후기

1. Component 방식 개발에 흥미를 느끼는 도중 사망할 정도로 양이 많음.

2. 라이브러리, 프레임워크 지겹도록 보게되는데 모두다 한결 같은 맨트 3가지가 공통적으로 있음.

"It's Easy" "Hello World" "Happy Hacking"

전~혀 쉽지 않고, 몇번씩 세상을 왔다갔다 하며, 내 뇌가 해킹 당하는 기분.

3. 각설하고, 잘만들긴 했는데 Web Programmer 수준이 아닌, Web Engineer 의 시대 도래 맞는듯.

---

2일차 진입해보자.

정신줄 놓지말자, ReactRouter 1일차

React Playground를 적극 활용하자.

Webpack build를 통해서 간단하게 셋팅하는 법을 보통 강의에서 이야기하는데

그게 중요한게 아니다.

빨리 써보는게 맞다.

일단 React를 쓰는 이유는 단하나 속도감 있는, 네이티브 같은 서비스의 품질을 웹 사용자들에게 선사하자라는 취지며

비동기적 반응에 따라서 데이터를 가져와야하는 사이트에 상당히 품질 좋은 경험을 선사하는데 의의가 있는거니

이점을 명심하고 정신줄 놓지말고 가자.

일단 나는 학습 패턴을 Router 공식홈페이지

https://reacttraining.com/react-router/web/guides/server-rendering

를 참고했다.

1. Example 봐도 규칙성을 어찌 짰는지 모르겠어서 내려봤더니 철학부터 자신들이 만든 구조들에 대한 자신감을 피력하는 가이드들.

유심히 보게 되었다. 그리고 모르겠어서

2. 예시를 봤는데 또 모르겠어서

3. API부터 보았다.

일단 내 스스로 학습했던 패턴은 이랬다.

- API라고 명시한 것이 Webpack을 경험한 직후라 적어보였다.

일단 중요한 API라고 명시한 것들은 React로 따지면 jsx의 컴포넌트들을 의미했고

facebook의 prop-types 로 따져보면 이것들은 element에 속하는 녀석들이였다.

그러했다. react-router를 만들었던 사람들은 자신들의 기능들을 jsx의 element화 된 종속요소로 판단짓게 만들고

이를 모듈화해서 불러오는 수를 썼던 것 같다. 영어가 짧아서 추론하면서 학습하고 있다. 시간이 배에 곱절이 걸렸다.

쉽게 이해하는 방법은

jsx에서도 태그가 있는데 component로 지칭한 것들은 모두다 태그다.

(여기서 태그란 html 태그와 비슷하게 생각합시다)

"우리는 JSX HTML을 하고 있고 이것은 HTML과 Javascript를 둘다 섞어논 무지개색의 템플릿이다"

"JSX는 import를 통해서 새로운 태그를 영입할 수 있는데.. 그냥 이건 마치 XML이다."

개소리로 이해해보려했다.

---

여기서 생각해봐야하는것은

react가 서버사이드 랜더링이 지원되고 나서부터

서버사이드에서도 이제는 랙트문법인 jsx를 쓸 수 있으니(바벨 프레셋을 babel-preset-react 이건...갓페북...)

서버든 접속자의 브라우저든 다 실행된다는 것을 일단 집고 넘어가야한다.

핵심 태그 5가지만 외우자

1. BrowserRouter

쓰임 : 브라우저에서 앱 1개를 화면에 뿌려주는 역할을 하면서 동시에 어디로 이동할 것인지 명시한 구역들을 정의해두는 태그

<BrowserRouter>

<MyFirstCreativeApp />

</BrouterRouter>

이렇게 쓰면 된다. 간단하다. 반드시 1개의 Children을 가져줘야한다.

2. HashRouter

쓰임 : 브라우저라우터와 똑같이 쓰임.

차이점이라고는 #/우리집/내방/내책상 처럼 해시태그를 사용하는 uri를 구성할 수 있는데

앵귤러1의 앵귤러 uirouter를 써본 사람들은 아하, 그럼 state도 관리 관장하겠구나 싶다는 것을 육감적으로 낚아챈다. 있다.

여러 엔지니어들의 특징들에 따라서 hashtype을 에트리뷰트로 받아낸다.

3. Link

아래 4개 프로퍼티는 반드시 외우자

to 라는 link의 프로퍼티는 또다시 4개의 인자가 있다. that's easy라고 하는데, 전혀 그렇지 않다.

to : { pathname : '', search : '', hash : '', state : {  } }

기본적으로 MDN의 location의 구조들을 보고 이해해오면 위 내용을 쉽게 좀 이해할 수 있다.

pathname은 어디로 이동할래, 현재 라우터 설정 범위 내에서 이동할 것을 이야기하는데, 다른 라우터 범위도 서버사이드한 이후로 이동 가능하다.

4. NavLink

Link를 좀더 확장적으로 쓰게만든건데 active 되어서 클래스 또는 스타일을 자주 먹이니 그점을 좀 미리 셋팅해둔 녀석이라고 보면된다.

5. Redirect

이동처리하는 녀석. FrontEnd다보니 권한적인 부분 또는 잘못된 경로로 접근했을 때 라우팅을 되잡아주는 역할에 쓰이니 필수 태그라 보면된다.

6. StaticRouter

이녀석이 서버사이드랜더링할 때 쓰인다. 아름답다라고 표현할 수 있겠고..

7. Route(필수)

각 라우터들은 Route를 수반하게 되는데 이를 나는 앵귤러로 따져보면

ng-if된 구역이라고 생각하면 쉽게 이해되고, php로 따지면 if문을 준것이라고 생각하면 쉽다.

구역을 나누어둔 녀석인데 매치하는 것은 url 기준으로 매치를 한다 path라는 string으로 매치를 하고.

component라는 녀석을 불러와 위에 편의상 불렀던 태그 한가지를 셋팅해두어 path가 일치하면 보여준다.

참고 : https://reacttraining.com/react-router/web/api/Route

이태까지 말했던 태그라 불렀던 것들을 앞으로 컴포넌트라고 부르겠습니다.

이 컴포넌트들을 통해서, 화면을 가렸다가, 보여줬다가 하는 느낌을 주는데 사실 react-dom을 수정하고 랜더링하면서 빠르게 보여줬다는 사실.

대단한 로직이고.. 최근 엔진이 바뀌어서 더 빨라진 느낌입니다.

<미처 알지 못했던 es6의 장점>

es6console playground에서 테스트 해보니

const nanunSaram = ()=>{

return <div></div>

}

라는 랙트 문법이 있다면, es6라면

const nanunSaram = ({ name })=>{

return <div></div>

}

이렇게 넘어온 값중에서 필요한 프로퍼티만 뽑아다 쓸 수 있는 문법을 자주쓰는데 ReactRouter팀이 이걸 많이 씁니다.

//

보통 React 하다가 넘어오면 props만 알고 넘어오는데

여기서는 컴포넌트 첫번째 인자에서 props.match 라는 것을 많이 쓰고

match에 대한 기술설명 또한 api실에 있어서 보시면 여러가지 뽑아다 쓰는 점이 많습니다.

이점 양지해서 학습하면 좋을 것 같습니다.

//

찬밥 더운밥 가리지 않고, 학습중입니다.

다소 좀 정신 없더라도, 급하게 뇟속으로 강제 주입 하는중이라.

나중에 정리해서 좀더 빠른 방법을 찾아서 쉽게 풀어써보겠습니다.

꾸역꾸역

//

오늘의 최고의 수확물

<BrowserRouter>

<Link to={ pathname : '/', search : '?page=1', hash : '#top', state : { sort_type : 'document_id' } }>

<Route path="/" exact component="Index" />

</BrowserRouter>

위 태그는 결국 브라우저에서 정의되고, 연산되고, 랜더링되어, 보여진다.

랙트를 하다보면 자꾸만 햇갈리는데 그것만 생각하자.