React - 2) React Design

이하는 React Docs Beta (https://beta.reactjs.org/learn)를 읽고 이해한 내용을 정리한 포스트이다.

1) React 용어 정리

JSX

: React에서 사용하는 markup으로 html, css와 유사하게 동작한다.

HTML보다 조건이 많은데, 대표적으로 조건과 사용방법은 다음과 같다.
1) 모든 tag는 close되어 있어야 함
2) 큰 tag 하나로 묶여있어야 함
3) 대부분에 camelCase를 사용
4) {JS} : JSX태그 안에 or attribute처럼 사용
5) {{JS}} : Object 전달

component

: JavaScript 함수 or class를 의미. 

이때 class는 대문자로 시작해야하는데, 소문자인 경우 태그로 취급하여 실행이 안된다.

prop

: 다른 component로 데이터를 전달한다. 데이터 흐름을 동적으로 설정할 때 사용한다.

쉽게 함수에 전달되는 인자와 유사하다고 이해했다.(=argument)

 

Hooks

: use~~로 시작하는 함수를 hooks라고 불리우며 동적인 값 변경에 사용한다.
ex) [state, stateSetter] = useState(0);

React.DOM과 root

: DOM은 Document Object Model의 약자로, 트리처럼 구조화된 텍스트의 추상화를 의미한다. 이때 텍스트는 웹 개발자에겐 HTML이고, HTML의 element들은 DOM의 노드가 된다. 즉 DOM은 HTML의 메모리 내 표현이다. 요즘 DOM은 매우 커졌기 때문에, 동적으로 작동하는 어플리케이션의 경우 이 큰 DOM 트리를 끊임없이 수정해야하고, overhead가 매우 크다. 이러한 이유로 등장한 것이 가상화 DOM, React.DOM이다.(react가 virtual DOM을 처음 만든것은 아니다)

 

 그 DOM 구조 중 ID가 root인 컴포넌트는 가장 최상위 컴포넌트이며 DOM 트리 구조의 최상위 노드이다. 자바스크립트와 연결해주는 요소로, 이 연결된 곳에 만들어진 컴포넌트들이 보여질 것이다.

 

render()와 hydrate()

render() : React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환한다. 하지만 React.DOM.render()를 사용하여 container에 이벤트를 보충하는 것은 17버전 이후로 금지되었으며, 이는 hydrate()를 사용한다.

hydrate() : render와 동일하나 ReactDOMServer로 렌더링 된 컨테이너에 이벤트를 보충하는데 사용된다. 

 

JSON API 

: javascript에서의 객체 표현 기법

 

2) React design steps

1. UI를 component 계층으로 분해
2. interactivity가 없는 static version을 생성
3. 변경 데이터들의 집합으로 state를 생성
    - 이때, prop이나 기존 data를 통해 알 수 있는 정보는 state가 아님
4. state를 선언할 위치 계층구조에서 파악하기
5. 입력 등 데이터 변화를 통해 바뀌는 inverse data flow 설정하기

UI description
- Export and Import

: python이나 c등 다른 언어와 마찬가지로 다른 변수, 클래스, 함수에 붙여 다른 파일에서도 사용 가능하게 해준다.

* default : main처럼 각 파일마다 하나씩 존재하며 export와 함께 붙는 suffix.

* 다른 함수에서 사용할 때 default가 붙어있으면 이름을 변경해서 사용이 가능하며, export const의 경우에는 불가능.
* 사용 : import { NAMED_EXPORT1, NAMED_EXPORT2, .. } from ... 

             import DEFAULT_EXPORT from ...

- Props

: properties의 줄임말로 다른 언어에서의 argument와 유사하게 사용된다.

* props는 읽기 전용이다

* <... {...props} /> 처럼 JSX spread syntax로 모든 속성을 전달 가능하다

* destructuring syntax : function(props)가 아닌 function({ component1, component2, ...}) 처럼 인자를 전달하는 방식

 

3) Conitional Rendering

- if 

: 다른 조건문과 비슷하게 동작한다.

 

- expression ? (True) : (False)

: expression이 true인 경우 : 앞을, false인 경우 뒤를 return 한다.

 

- && , ||

: ?연산자에서 true나 false expression이 필요 없는 경우, 사용한다.

* (expression) && (true)

* (expression) || (false)

console.log(true && 1 > 0 && 'success'); //success
console.log(true && 1 < 0 && 'success'); //false
console.log(1 > 0 || 'success'); //true
console.log(1 < 0 || 'success'); //success

단, 이때 조건으로 사용된 expression이 숫자인 경우, boolean 연산을 수행하기 때문에 다른 expression을 사용해야 한다.

 

4) List Rendering

- map()

: 주어진 함수에 각 배열의 요소를 전달한 후 얻은 결과를 새로 배열로 return

MAP.map(FUNCTION, [ARGS]);
MAP.map(FUNCTION(value_in_array, index, array), ARGS);

 

* const listItes = people.map(person => <li>{person}</li>); 와 같이 JSX도 mapping할 수 있다.

* Key값은 변경할 수 없으며 유일해야 하지만, 다른 배열인 경우 같은 JSX node를 사용할 수 있다.

 

 

- filter()

: 주어진 함수를 통과하는 요소를 모아(true/false로 구분) 새로운 배열로 return

FILTER.filter(ARGS => EXPRESSION);

 

4) Purity

Pure함수는 수학 공식과 같은 함수를 일컫는데, 구체적으로 pure하다는 뜻은 다음과 같다.

1. 같은 argument에 대해서 항상 같은 return값을 갖는다.

   : 즉, input stream, mutual reference, static, local변수 등에 구애받지 않는다.

2. 함수나 객체의 범위를 벗어나 변수를 변형시키지 않는다.

   : rendering하면서 구성요소가 다른 변수나 input stream등의 값을 변경시키지 않는다.

     이때, 같은 함수안에서 생성된 로컬 변수를 변경시키는 것은 허용하는데, 이를 local mutation이라고 한다.

 

"왜 pure한 함수를 사용해야 하는가?"

: 함수가 항상 같은 환경에서 실행되지 않으므로(서버 등), 동일 입력에 대해 동일 결과를 반환하는 하나의 구성요소가 많은 사용자 요청을 처리할 수 있다. rendering은 언제든 실행될 수 있으므로 서로의 rendering sequence에 의존하면 안된다.

또한 시간을 낭비하지 않을 수 있다. deep component tree에서 rendering 되는 중 data가 변경되면, pure한 함수는 언제든지 계산을 중지해도 다른 변수를 변경시키지 않아 기존 rendering을 기다리지 않고 새로 시작해도 문제가 없다.