미소여우의 주석달기

React 엘리먼트

2020년08월06일

에듀캐스트 장고&리액트 강의를 듣고 정리하는 글이다.

리액트

UI 라이브러리 (웹 프론트엔드 및 앱 Native, VR등에서 활용) UI데이터를 관리하는 방법을 제공

  • 부모 컴포넌트로부터 내려받는 속성값 -> props
  • 컴포넌트 내부에서 생성/관리되는 상탯값 -> state

UI데이터(UI에 연결된 속성값/상탯값)가 변경되면, 해당 컴포넌트의 render()함수가 호출이 되어 화면을 자동으로 갱신

  • 클래스형 컴포넌트에서는 render() 함수가 호출
  • 함수형 컴포넌트에서는 그 함수가 매번 호출. 컴포넌트에서 유지해야할 값들을 Hook을 통해 관리한다.

리액트의 핵심 - 선언적 UI (Declarative UI)

UI에 변화를 가할 때마다 일일이 코드를 수행하는 것이 아니라, 데이터 (속성값/상탯값)에 맞춰 뵤여질 UI를 미리 선언해두면, 데이터가 변경되면 그 즉시 데이터에 맞춰 UI가 그려진다.

카운터 컴포넌트 (클래스)

class Counter1 extends React.Component {
  state = {
    value: this.props.initialValue,
  };

  onClick = () => {
    const { value } = this.state;
    this.setState({ value: value + 1 });
  };

  render() {
    const { value } = this.state; // 현재의 상탯값을 참조
    return (
      <div>
        Counter1: {value}
        <Button onClick={this.onClick}>+1</Button>
      </div>
    ); // jsx 문법
  }
}

function App() {
  return (
    <div>
      <Counter1 initialValue={10} />
      <Counter1 initialValue={10} />
      <Counter1 initialValue={10} />
    </div>
  );
}

React Element

화면을 담당하며, React 앱의 가장 작은 단위

// jsx 문법
const reactElement1 = <h1>Hello, React!</h1>;

// js 문법
const reactElement2 = React.createElement('h1', null, 'Hello, React!');

React Component

Component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다.

  • 개념적으로 JavaScript 함수와 유사
  • 속성값을 전달받아, Element를 반환 클래스로 구현하는 컴포넌트가 먼저 지원되었고, 최근에 함수로 구현하는 컴포넌트를 지원한다.

함수도 첫글자는 대문자로 표기해주자. 안그러면 인식을 못하는 경우가 발생한다 한다.

// 클래스형
class Person1 extends React.Component {
  render() {
    return (
      <div>
        Person: {this.props.name}
      </div>
    )
  }
}

// 함수형
function Person2(props){
  return (
    <div>
      Person: {this.props.name}
    </div>
  )
}
react

Related Posts