[React] 리액트 기초 및 중요 내용 정리

이 글은 누구든지 하는 리액트 [www.youtube.com/playlist?list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH]을 참고하여 작성하였습니다.

 

 

프론트앤드 라이브러리 : React, Angular, Vue 등

MVC, MVVM, MVW 등을 사용하던 기존 웹 프레임워크/라이브러리

공통점 : Model (양방향 바인딩)

변화(Mutation)

그냥 mutation을 하지 말고, 데이터가 바뀌면 뷰를 날려버리고 새로 만들자!

Virtual DOM : 가상의 돔에 렌더링을 하고 기존의 돔을 비교한 후, 정말 변화가 필요한 곳에만 업데이트 해줌

Virtual DOM

Webpack

코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어냄

Webpack

-> 'bundling작업' 이라고 함

 

Babel : JS 변환 도구

 

 

#8 Props

Props 사용 - 자식 컴포넌트

{this.props.name}

 

Props 사용 - 부모 컴포넌트

<MyName name="리액트" />;

MyName은 클래스명이고, 뒤의 name="리액트" 가 props이다.

 

 

디폴트 값 설정 방법1 - 클래스 내부에서 (최신식)

  static defaultProps = {
    name: '기본이름'
  };

 

디폴트 값 설정 방법2 - 클래스 외부에서

MyName.defaultProps = {
  name: '기본이름'
};

 

<MyName.js>

import React, { Component } from 'react';

class MyName extends Component {
  static defaultProps = {
    name: '기본이름'
  };
  render() {
    return (
      <div>
        안녕하세요 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

export default MyName;

 

<App.js>

import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() {
    return <MyName name="리액트" />;
  }
}

export default App;

 

함수형 컴포넌트

예시) MyName.js

import React from 'react'; //{ Component } 삭제

const MyName = ({ name }) => { // 비구조화 할당
  return <div>안녕하세요 제 이름은 {name}입니다.</div>;
};

MyName.defaultProps = {
  name: '기본이름'
};
export default MyName;

 

 

 

 

#9 State

 

state는 컴포넌트 내부에서 변경 가능하며, 변경시 사용하는 함수는 setState()이다.

state가 변경될 때마다 rerendering을 한다.

(rendering이란? render() 함수 호출을 뜻함)

 

**props VS State**

	props	State
데이터 전달 방향	부모 -> 자식	자기 자신
수정 가능 여부	읽기전용(변경 불가능)	내부 변경 가능

 

<Counter.js>

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  };

  handleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  };

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  };

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

 

<App.js>

import React, { Component } from 'react';
import Counter from './Counter';

class App extends Component {
  render() {
    return <Counter />;
  }
}

export default App;

 

 

#10 LifeCycle API

 

라이프사이클 종류

1. 나타날 때

2. 업데이트 될 때

  ① props가 바뀔 때

  ② state가 바뀔 때

  ③ 부모 컴포넌트가 리렌더링될 때

  ④ this.forceUpdate로 강제로 렌더링을 트리거할 때

3. 사라질 때

 

암기X. 알고 있다가 사용해야하는 상황에 쓰면 된다.

 

https://twitter.com/dan_abramov/status/981712092611989509

 

Mounting : 컴포넌트가 브라우저 상에 나타날 때

Updating : 컴포넌트의 props나 state가 바뀌었을 때

Unmounting : 컴포넌트가 브라우저 상에 사라질 때

 

• constructor : 생성자 함수 - 컴포넌트가 새로 만들어 질 때 가장 먼저 호출되는 함수, state 초기화 등
• getDerivedStateFromProps : props로 받은 값을 state에 동기화시키고 싶을 때
• render : 어떤 돔을 만들지, 내부 태그에 어떤 값을 전달해 줄지
• React updates Dom and refs
• componentDidMount : 실제로 브라우저에 나타날 때/ 외부 라이브러리(차트 라이브러리 등) 사용 시 특정 돔에 차트를 그려달라는 식의 코드 작성/ 네크워크, api, ajax 요청/ 컴포넌트 나타난 뒤 몇초 뒤 이벤트(스크롤, 클릭 등) 하고싶을 때, 이벤트 리스닝 등
• shouldComponentUpdate : 컴포넌트가 업데이트 되는 성능을 최적화 시키고 싶을 때, virtual dom에도 랜더링 할지 말지 결정(true일 때 밑에 것들 호출, false면 호출X)
• getSnapshotBeforeUpdate : 렌더링 한 결과물이 브라우저에 반영되기 바로 직전에 호출되는 함수
• componentDidUpdate : 컴포넌트가 업데이트 되었을 때 호출되는 함수
• componentWillUmmount : componentDidMount에서 설정한 리스너를 없앨 때
• * componentDidCatch : 버그잡을 때