react.vlpt.us를 읽고 공부한 내용입니다.

Why React - 상태를 업데이트하기 위한 방식

• JavaScript를 통해 HTML UI를 제어하기 위해선, DOM을 변형하기 위해 DOM Selector API를 통해 특정 DOM을 선택하고 이벤트 발생 시 변화를 주는 과정이 필요하다.
• 사용자 상호작용이 잦은 웹페이지일수록 DOM 상태를 업데이트하는 규칙이 다양해질 것이며, 상태를 관리하기가 어려워질 것이다. 대부분의 경우 어플리케이션 규모가 커질 때 DOM을 직접 건드리면 코드가 난잡해진다.

• React는 이 상황을 해결하고자 등장한 프레임워크 중 하나이며, React는 DOM을 업데이트하는 대신 완전히 새로운 DOM을 생성한다.
• 실제로 DOM을 매 업데이트 상황마다 생성한다면, 성능 저하가 발생할 것이므로, React는 메모리 상에 존재하는 Virtual DOM을 사용해 UI를 보여주는 방식으로 이를 풀어낸다.
• Virtual DOM과 실제 DOM을 Framework가 비교하고, 차이를 감지해 알아서 실제 DOM을 자연스럽게 패치하며, 성능저하 없이 업데이트를 가능하게 만든다.

Components

• 모든 것이 컴포넌트 (구성요소)
• 컴포넌트의 조합으로 어플리케이션이 완성된다.

JSX

• HTML 문법과 비슷하지만 일부 속성이 다른 React return 객체이다. Babel이 JSX를 Javascript로 변환한다.

Fragment

• 반드시 감싸야 하는 Tag를 div 없이 감싸는 문법이다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

style 과 className

• JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다름.
• 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해야 함.
• CSS class 를 설정 할 때에는 class= 가 아닌 className= 으로 설정.

props (parameter)를 통해 컴포넌트 값 전달하기

• 기본적으로 사전에 이름이 붙여지지 않은 property의 경우 props라는 namespace에 값이 전달됨.
• props에 값을 전달하지 않고 이름만 적어둔다면 default value로 true가 전달됨.

// app.js
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

// hello.js
import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

// hello-predefined.js
import React from 'react';

function Hello({ color, name }) {
  return <div style=>안녕하세요 {name}</div>
}

export default Hello;

children

• JSX 태그 사이에 넣은 값은 props.children에서 조회가 가능함.

조건부 렌더링

• 삼항연산자를 통해 조건부 렌더링을 수행할 수 있다.

// isSpecial prop이 true인 경우에만 asterisk를 렌더링한다.
import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style=>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

• true인 경우에만 렌더링하는 조건이라면, && 연산자를 통해 더 간편하게 코딩할 수 있다.

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style=>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

상태 관리

useState

• getter와 setter 개념으로 생각하면 쉽다. 다만 함수형으로 접근이 가능하다.

inputState

• 입력 form을 초기화하고 동적으로 값을 받아올 수 있다.

multipleInputState

• 여러 입력 state를 하나의 state로 관리할 수 있다.