React 용어 정리

• virtual DOM
• webpack :
• babel
• var는 scope가 함수 단위

var a = 'hello'
if (true){
var a = 'bye'
console.log(a) = bye
}
console.log(a) = bye

• let, const은 scope가 block단위

var는 이제 안씀. const는 한번 선언하고 바뀌지 않는 값, let은 유동적인 값

• 조건부 렌더링
  삼항 연산자 사용

• props : 부모가 자식에게 넘겨주는 값

• 함수형 컴포넌트와 클래스형 컴포넌트를 용도에 맞게 넣어줘야함
  함수형 컴포넌트는 초기 마운트 속도가 미세하게 빠름. 불필요한 기능 없어서 메모리 적게사용
  단순히 data 받아와서 보여주는 기능이면 함수형 컴포넌트가 더 효율적
  컴포넌트가 엄청 많이 만드는거 아니면 성능차이는 거의 없음

• {}로 묶어주는 것은 객체를 의미함

• setState() : state 객체는 생성하고 이벤트를 줄 때
  일반 함수는 this을 알 수 없음.

  일반함수를 써야하는 상황이면 constructor(props) 써서 super(props);
  this.handleIncrease = this.handleIncrease.bind(this);로 묶어주는 작업이 선행되어야함

// state라는 객체를 생성
  state = {
    number :2
  }
  // 기능을 가진 함수 선언
  handleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    })
  }

• props는 읽기전용이고 state는 수정이 필요할 때

  Life cycle API

  Mounting

  component : 생성자 함수, 컴포넌트가 처음 만들어질 때 가장 먼저 생성되는 함수, 컴포넌트의 초기 설정 및 미리 해야할 작업 설정
  getDerivedStateFromProps : props의 값을 state에 동기화시키고 싶으면 이거 사용
  render : 어떤 돔을 만들지 내부 태그에 어떤 값을 전달할지
  componentDidMount : 외부 라이브러리 사용시 특정 돔에다가 드려달라고 요청가능, api요청 해야할 때 여기서 처리, 컴포넌트가 나타나고 몇 초 뒤에 뭘 하고싶다. 해당 돔에서 스크롤 이벤트를 읽고싶다 할 때 사용. 우리가 만든 컴포넌트가 브라우저에 나타나고난 시점에 뭘 할지 (이벤트처리, api요청 다 여기서 처리)

  Updateing

  shouldComponentUpdate : 컴포넌트가 업데이트되는 성능을 최적화시키고 싶을 때 사용. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트까지 리렌더링되어야함. 이 작업이 불필요할 때가 있음. 리액트 핵심 아이디어와 연결되어있음. virtual DOM에 그리는 것 조차 비효율 적일 때, 여기서 어떤 로직에 따라 true와 false를 반환해서 virtual DOM에 쓸지 말지 결정할 수 있음.
  getnapshotBeforeUpdate : 렌더링한 결과물이 브라우저상에 반영되기 바로 직전, 렌더링을 하고나서 업데이트를 하기 전에 스크롤의 위치, 해당 돔의 크리 같은걸 가져오고싶을 때 사용.
  componentDidUpdate : 이전 상태와 지금 상태가 다르면 어떤 작업을 하겠다. 할 수 있음

  Unmounting

  componentWillUnmount : 컴포넌트가 사라지는 과정에서 호출됨. 리스너를 없애주는 작업

Counter.js

import React, { Component } from 'react';

class Counter extends Component {
 // state라는 객체를 생성
 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, Fragment } from 'react';
import Counter from './Counter';

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

export default App;
 

MEMO

• App.js는 데이터를 받아서 원하는 부분에 데이터를 던져주는 역할을 하는 애
• MyName이라는 애는 App.js에서 리턴해준 애를 받아서 화면에 띄워주는 애

return <MyName />

• state : 바뀔 수 있는 부분, 버튼을 누르면 글이 바뀐다던지

• 실질적으로 바뀐 부분이 없다고해도 setState()만 호출되면 렌더링이 일어난다. -> shouldComponentUpdate로 막아줘야함. 바뀌는게 없으면 렌더링이 되지 않도록

  혹은 PureComponent (PureComponent는 자동 - 단점은 객체나 배열같은 참조관계가 있는 멤버(?)가 생기면 purecomponent가 못 구분함)

shouldComponentUpdate가 더 쉬울수도 있을 거같음, 커스텀도 가능

자료구조 복잡하게 만들지 말기 - 배열 안에 객체 안에 배열 이런거 하지 말기
컴포넌트를 잘게 쪼개서 자식한테 작은 단위로 물려줘야함

memo : 컴포넌트를 메모로 감싸주면 memoization기능. 제일 리프에 있는 자식들은 memo나 purecomponent를 써주면 성능 최적화에 엄청 차이가 있음

• props는 자식이 바꾸면 안되고 부모가 바꿔야한다.

• setState는 렌더링을 다시 실행하고, useRef는 값이 바껴도 렌더링을 하지 않는다. ref는 꼭 current로 접근해야함

• 연습코드

fruits_entries = Object.entries(this.fruits)

{this.fruits_entries.map(([key, value]) => 
                    <div>
                    key is {key} value is {value}
                    </div>
                    )}

• 실제 코드

return(
{Object.entries(this.state.user)
 	.map(([key, value]) => 
 		<div>
     		id : {key} <br /> email: {value.email}<br /> work_field: {value.work_field} <hr />
 		</div>
 	)}
 )