React 기본개념

SPA

SPA 의 장단점

필요한 부분만 렌더링 하기 때문에 MPA (Multi Page Application) 대비 로딩이 빠르다

서버 측에서 레이아웃 빌드 대신에 API 제공에 집중할 수 있기 때문에 서버는 리소스 소모가 덜하다

(CSR : Client Side Rendering, SSR : Server Side Rendering 은 또 다른 이야기)

PWA 로 전환이 쉽다 (Progressive Web APP)

단점은 SEO (검색 엔진 최적화) 가 어렵다.

SEO 가 중요한 블로그 만들때는 JAM 스택 기반의 정적인 페이지로 만든다 (SEO 에 강점)

네이게이션을 수동 관리

React Router 로 URL 을 관리 해줘야 한다

Declarative approach (선언적 접근)

DOM 을 직접 건드리지 않고 웹 인터페이스를 구축 가능
실제 DOM 이벤트와 상호작용할 필요 없이 이벤트 시스템을 가질 수 있다

???? 이게 무슨 말인가 하고 예제를 찾아보면

선언적의 반대가 imperative approach 인데

아래의 예제를 보면 imperative 접근은 버튼에 대한 이벤트나 스타일을 하나씩 바꿔 나가고

선언적 접근은 한번에 바꿔버리는 차이를 알 수 있다

https://alexsidorenko.com/blog/react-is-declarative-what-does-it-mean/

React is Declarative - What Does it Mean?

What does declarative mean and what is the opposite of declarative

alexsidorenko.com

불변성 (Immutability)

immutable 변수는 변경되지 않습니다. 값을 변경하면 새로운 변수가 생기는 원리 입니다.

오브젝트와 배열도 같은 방식 입니다

React 는 state 를 변경하기 위해서 setState 를 반드시 사용해야 합니다

Redux 는 state 를 직접 바꾸지 않고 reducer 를 통해서만 합니다

Purity

함수에서 객체를 변경하지 않고 새로운 객체를 리턴하는 경우를 pure function 이라고 합니다

return 이 props 에만 의존 되는 경우가 pure component 가 될 수 있습니다

//props 의 message 만 의존
const Button = props => {
  return <button>{props.message}</button>
}

//props 에 대해서만 의존
class Button extends React.Component {
  render() {
    return <button>{this.props.message}</button>
  }
}

Composition

map 과 filter 를 사용하면 복잡한 기능을 간결하게 구현할 수 있습니다

// 이건 React 의 특성은 아니고 JavaScript 특성
const list = ['Apple', 'Orange', 'Egg']
list.map(item => item[0]).filter(item => item === 'A') //'A'

컴포넌트의 확장

const Button = props => {
  return <button>{props.text}</button>
}

const SubmitButton = () => {
  return <Button text="Submit" />
}

const LoginButton = () => {
  return <Button text="Login" />
}

//method 도 확장 가능합니다
const Button = props => {
  return <button onClick={props.onClickHandler}>{props.text}</button>
}

const LoginButton = props => {
  return <Button text="Login" onClickHandler={props.onClickHandler} />
}

const Container = () => {
  const onClickHandler = () => {
    alert('clicked')
  }
  
  return <LoginButton onClickHandler={onClickHandler} />
}

Virtual DOM

React 전에는 DOM (Document Object Model) 을 직접 조작했습니다.

DOM 은 <html> 태그에서 시작하여 node 라고 하는 모든 자식을 내려가는 페이지의 트리 표현 입니다

DOM 은 브라우저 메모리에 보관되며 페이지에서 보는 것과 직접 연결되고 API 를 통해서 조작합니다

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

React 는 렌더링과 관련하여 Virtual DOM 을 사용합니다.

DOM 이 변경될 때 마다 브라우저는 repaint 와 reflow 가 일어납니다.

repaint - 레이아웃과 위치에 영향을 주지 않는 시각적 / 콘텐츠 변경
reflow - 일부 또는 전체 레이아웃을 다시 계산

React 는 Virtual DOM 을 이용하여 페이지 변경이 일어날때 브라우저가 리소스를 덜 사용하도록 합니다

컴포넌트를 호출할 때 setState() 이전과 다른 상태를 넣으면 React 는 해당 컴포넌트를 dirty 로 표시하고

React 는 구성요소가 명시적으로 상태를 변경할 때만 업데이트 합니다.

setState 로 값이 변경된 컴포넌트를 dirty 로 표기
dirty 로 표시된 컴포넌트와 관련된 Virtual DOM 을 업데이트 (shouldComponentUpdate() 포함)
변경사항을 조정하기 위해서 diffing 알고리즘 실행
실제 DOM 업데이트

많은 변경사항이 일어날 때 Virtual DOM 을 사용하여 일괄 처리를 하고 실제 DOM 은 한번만 업데이트

Unidirectional Data Flow

부모의 데이터를 props 라고 합니다.
props 는 부모에서 자식으로만 전달됩니다.
자식 컴포넌트에서는 데이터를 수정할 수 없습니다

저작자표시 비영리 변경금지

'IT > React' 카테고리의 다른 글

React 18 에는 enzyme 사용하지 마세요 (0)	2022.08.01
REACT NATIVE UI COMPONENT (0)	2022.08.01
Context API React (0)	2022.08.01
React Components (0)	2022.07.27
React JSX (0)	2022.07.27
React 를 위한 자바스크립트 컨셉 이해하기 (0)	2022.07.27
React 개발 환경 설정 (0)	2022.07.26
React 간단하게 사용하기 (0)	2022.07.26