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

각 속성값에 대한 타입 명시 필 필수 여부를 지정하여 생산성을 올린다.

• TypeScript를 사용해서 지정할 수 있다.
• prop-types 패키지를 통해 속성값에 타입을 지정할 수 있다.
  • yarn add prop-types

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

상탯값 (state)

• UI (엘리먼트)로의 반영을 위해, 유지해야할 값들의 묶음
• 각 컴포넌트 내에서만 사용되는 값들은 컴포넌트 안에서 생성/갱신 -> 리액트 기본으로 동작 여러 컴포넌트에서 사용되는 값들은 별도 공간에서 생성/갱신 -> Redux, Context API, MobX등을 활용하면 편리하다.
• 컴포넌트에서 상탯값에 대한 getter/setter 함수를 제공해준다. (성능 저하의 원인이 될 수 있으니 상탯값을 직접 변경하지 말자!)

import React from 'react';

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  onClick = () => {
    this.state.counter += 1; // 이렇게 쓰지 말자. 모든 상탯값/속성값은 불변값으로 처리되어야 한다.

    const counter = this.state.counter + 1;
    this.setState({ counter });
  }

  render(){
    const { counter } = this.state;
    return (
      <p onClick={this.onClick}>
        Counter : {counter}
      </p>
    )
  }
}

클래스형 컴포넌트에서는 this.state 객체를 통해 상탯값 접근(getter)과 this.setState 함수를 통해 상탯값을 변경(setter)해준다.

setState

ReactComponent.setState(
  객체 또는 함수,
  처리가 끝났을 때 호출되는 콜백 함수
)

비동기로 동작 변경할 특정 state값들이 담긴 object를 지정하거나, 함수를 지정 가능 -> 매개변수를 호출되기 직전 상태값을 받는다. (추천)

• setter에 지정된 함수에서 상탯값을 직접 참조하고 있지 않아도, “직전 상탯값”을 인자로 전달받기에 유용하다.
• immer 라이브러리랑 같이 쓰기 좋다.

// 2씩 증가할거 같지만, 비동기 동작이기에 count 값은 1만 증가한다.
onClick1 = () => {
  this.setState({count: this.state.count + 1})
  this.setState({count: this.state.count + 1})
}

// 직전 상태값을 받아와 처리
onClick2 = () => {
  this.setState(prevState => ({count: prevState.count + 1}));
  this.setState(prevState => ({count: prevState.count + 1}));
}

속성

컴포넌트 생성 시에 넘겨지는 값의 목록

• 읽기 전용으로 취급하고, 변경하지 않는다.
• 자식 컴포넌트 입장에서는 데이터/함수를 전달받는 유일한 통로(Context API 사용하면 새로운 통로를 이용할 수 있다.)
• 부모 컴포넌트의 데이터/함수를 자식 컴포넌트에 넘겨준다.
• 컴포넌 HOC(High Order Components) 기법을 통해, Redus의 값이나 함수를 넘겨 받기도 한다.

값 지정 시에 중괄호를 통해 다양한 타입의 값 및 표현식 지정 가능

• 중괄호를 빼면, 문자열 타입의 값만 지정 가능하다. ```javascript

```

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

리액트

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>
  )
}

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

Ant Design

알리바바 그룹에서 개발한 UI 프레임워크

사용하기

1. yarn add antd (package.js가 위치한 곳에 설치해줘야 한다!)
2. App.js 참조 경로에 antd/dist/antd.css 추가하기. 또는, CSS 파일에 추가할거면 @import ~"antd/dist/antd.css";

import React from 'react';
import { Button } from 'antd';
import 'App.css';

function App() {
  return (
    <div>
      <button>Hello, React</button>
      <Button type="primary">Hello, Antd.</Button>
    </div>
  );
}

export default App;

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

다양한 babel preset

babel-preset-es20152015: ES6 babel-preset-es20152016: ES7 babel-preset-es20152017: ES8 babel-preset-env

• 디폴트 동작으로 ES6이상의 preset을 적용하여, ES5로 transpiling(호환성 맞춰주는 듯)
• 개별 지정보다 본 preset을 권장

webpack (modue bundler)

javascript, jsx, css, sass, less, es6, 이미지, HTML, 폰트 등 거의 모든 것이 모듈이 될 수 있으며, 하나의 파일(bundle)로 묶을 수 있다. 모듈성과 네트워크 성능 향상할 수 있다.

특징

• 코드를 필요할 때, 로딩 가능
• Minifying: 불필요한 코드, 공백/줄바꿈, 긴 이름 등을 줄여, 파일 크기 줄이기
• HMR(Hot Module Replacement): 개발모드에서 원본 소스코드 변경을 감지하여, 변경된 모듈만 즉시 갱신

지원 Loaders

• babel-loader: ES6나 리액트 코드를 transpiling
• css-loader: 설정에 따라 postcss-loader, sass-loader를 추가로 설정. css를 HTMl내에서 엘리멘트를 포함시킬 필요없이 JS/JSX단에서 임포트하여 React 컴포너트에 즉시 적용 가능하다.

필요한 유틸리티 및 라이브러리 설치

• 유틸리티 설치 npm install –global yarn yarn global add webpack webpack-cli

• 개발 시에 필요한 라이브러리 설치 yarn add –dev @babel/core babel-loader @babel/preset-env @babel/preset-react

• 프로덕션에서 필요한 라이브러리 설치 yarn add react react-dom