[React 튜터링 일지] React 기본 1주차

소소하게 React를 이용한 웹 개발 튜터링을 진행하게 되어 일지를 남긴다.

1. React를 이용한 웹 개발 stack에 대한 설명

• 보통 react와 함께 react-router, redux를 사용한다.
• react-router는 SPA에서 url path에 따라 다른 react component를 렌더링하게 도와준다.
• redux는 중앙 데이터 저장소(store)로 react의 한방향 데이터 전달로 인한 개발 번거로움을 덜어준다.

위 항목 얘기하면서 component가 뭔지, redux 얘기하면서 redux 없이 실제 헤비한 웹 개발하면 어떤 불편함이 있을지 설명하기위해
Component Tree 구조에 대해 설명함

2. Component란? React는 Component로 이뤄진 Tree이다.

• Component는 화면에 표시되는 html 덩어리이자 React의 Unit
• React는 Component들로 Tree구조를 이룬다.
• Parent Component가 Child Component를 import해서 자기 덩어리 안에 그려내면서
  Parent-Child 관계가 형성되고, 여러 페이지(subTree)들은 root가 되는 Component 밑에 router로 연결되어 하나의 큰 Tree로 생성된다.
• ex) Title Component -> <h1>{title}</h1>

3. Redux를 왜 쓰는지

• 실제 개발을 하면 여러 페이지가 생기고, 그 페이지 Component를 구성하는것은 정말 많은 Component들이다.
• 만약에 내가 Tree 기준으로 가장 바닥에 있는 Component에서 다른 페이지 Component의 하위 Component에 영향을 끼치고 싶다면
  (예를 들어 로그인을 했을때 계정정보를 옆 페이지- 완료 페이지에 넘기고 싶다)
  redux 없이 React만 쓰면 위로 몇 단계 올리고, 아래로 몇 단계 내려야만 가능하다.
  이게 코드로 보면 정말 귀찮귀찮은 일
  그래서 Global storage인 Redux store를 두고, 멀리있는 Component끼리 소통할 수 있게 한 것이다.

4. React는 SPA 개발을 위한 Framework이다.

• SPA가 뭔가?

• 원래 jsp 웹 개발 시절의 MPA 방식 설명 - url path마다 그려야하는 view가 따로 있고,
  클라이언트(브라우저)는 각 path마다 서버에 view를 달라고 요청, 응답받는 방식
  이 방식의 단점은 매 페이지 이동마다 서버와의 통신 시간이 걸린다는 점

• network 비용 높다

• 그리고 예를들어 두 페이지가 상단 메뉴는 같다고 하더라도 view를 통째로 받아오기 때문에,
  다른 부분만 그리는게 아니어서 rendering 비용이 높다 - 최적화가 어렵다.

• SPA는 서버에서 최소화로 그린 뒤 나머지를 JS를 통해 채운다.

• SPA는 서버와의 통신을 최소화해서 network 비용이 낮다.

• SPA는 공통된 부분은 놨두고 변경된 부분만 그리면 되어서 rendering 최적화가 쉽다.

• UX의 관점에서 매 페이지 이동마다 "깜빡"이는 것 없이 변화된 부분만 그리면 돼서 좋다.

• 그러나 SPA는 첫 서버의 응답이 느리다 - JS 파일이 무겁기 때문이다.

• 그리고 첫 서버 응답으로부터 그리는 시간이 느리다. MPA는 받은 html을 후다닥 그리면 되는데 SPA는 거의 빈 html을 js가 브라우저가 받은 뒤 채워야한다.

• Framework란 무엇인가? Library랑 무슨차이가..?

• Framework도 Library이다.

• 다만 역할이 조금 다르다.

• Framework는 좀 더 hyper, 좀 더 고차원의 기능을 제공한다. 틀을 제공한다.

• Framework이 아닌 단순한 js library는 - ex) Lodash - 유틸 코드들의 집합소?라고도 보면 된다.

5. Component의 재사용성이란?

• 비슷한 생김새, 비슷한 로직을 갖고있는 두 html 덩어리가 있다고 하면 한 코드에서 조금 다른 조건을 주고 그리고 싶다.
• Component는 최대한 재사용 가능하게 만드는것이 좋다.
• 그러나 어느 선에서까지 재사용하게 할것인지는 개발자의 재량
• Component에 처리할 함수를 prop으로 넘겨 확장성있는 코드를 짤 수도 있다.

6. React의 자연스러운 데이터 흐름은 위->아래 방향이다.

• Parent Component에서 Child Component로 데이터를 흘려보내는게 자연스러운 방법이다.
• 아래->위 데이터 전달을 위해서는 "부자연스러운" 복잡한 방식을 통해야한다.
• Parent에서 데이터를 넘겨받을 함수를 Child에 넘겨주고, Child에서 그 함수에 param으로 넘길 데이터를 전달한다.
• 그 함수는 Parent에서 선언되었기 때문에 Parent를 this로 실행해서 데이터를 Parent Context가 넘겨받을 수 있다.
• state는 불변 객체이기 때문에 항상 setState로 통째로 갈아끼워줘야 한다.
• state를 this.state.xxx = xxx 로 변경하면 변경당시 이 Component를 다시 그려야 한다는 신호를 못받아서 나중에 꼬일 수 있다.

7. JSX도 React Element 이다.

• JSX 문법이 html 같지만 이건 순수 html text가 아니다.
• React 프로젝트를 웹에 띄우기 위해 빌드 과정을 거치는데 npm run start 나 npm run build
  이 때 JSX 문법이 React.Element 로 변경된다.
• 따라서 순수 html의 선언 문법과 조금 다른 부분이 있으니 주의하자

8. React LifeCycle

• props와 state가 변해야만 다시 그린다.
• render는 props와 state에 의존도가 있다.
• state는 immutable한 객체이다. 꼭 setState를 통해서 변경하자.