React 뿌시기 1일차

React란?

UI 구현을 위한 선언적이고 효율적이며 유연한 JS 라이브러리

기본구조

class ShoppingList extends React.Component {
  render() {
    return (
      	<div className="shopping-list">
      		<h1>Shopping List for {this.props.name}</h1>
      	</div>
      );
  }
}

// 사용 예시 <ShoppingList name="Mark"/>

1. React.Component

• 신규 컴포넌트 작성에 사용되는 클래스
  -> 데이터가 변경될 때 올바른 컴포넌트들을 업데이트하고 랜더링

2. ShoppingList

• React 컴포넌트 클래스, React 컴포넌트 타입
• 하나의 컴포넌트는 props라 불리는 파라미터를 사용
• render 메서드를 통해 표시할 뷰 계층 구조를 반환

3. render()

• 렌더링하길 원하는 내용을 반환하면 React는 그 내용을 가져와 스크린에 랜더링
• 특히 render는 React 엘리먼트를 반환하는데 이는 랜더링 할 부분에 대한 간단한 내용
• JSX 사용시 문법이 더 간결해짐
  === React.createElement('div', {classNmae: 'shopping-list});

/*#__PURE__*/
React.createElement("div", {
  className: "shopping-list"
}, /*#__PURE__*/React.createElement("h1", null, "Shopping List for ", props.name), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Instagram"), /*#__PURE__*/React.createElement("li", null, "WhatsApp"), /*#__PURE__*/React.createElement("li", null, "Oculus")));

• JSX에서는 중괄호 안에 JS문법을 사용할 수 있음
  각 React 엘리먼트는 변수에 저장하거나 프로그램 여기저기에 전달할 수 있는 실제 JS 객체!

• ShoppingList 컴포넌트는 내장된 DOM 컴포넌트만 랜더링
  But. <ShoppingList /> 코드를 작성하여 커스텀 React 컴포넌트를 쉽게 구성할 수 있음
  -> 각 컴포넌트는 캡슐화되어 독립적으로 동작할 수 있기 때문에 간단한 컴포넌트들로 복잡한 UI를 구현할 수 있음

this.state

• React 컴포넌트는 생성자에서 this.state를 설정하여 state를 가질 수 있고
  state는 컴포넌트에서 private으로 간주되어야 함
• 사각형의 현재 value 값을 상태에 저장하고 클릭할 때 바뀌도록 하는 코드

JS의 클래스

• 서브클래스의 생성자 정의 : super(); 메소드를 명시적으로 호출