yongmin

리액트 컴포넌트 라이프사이클

• 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 페이지에서 사라질때 까지를 의미
• 라이프 사이클은 크게 3가지 카테고리로 나뉨
  1. 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는것
  2. 업데이트 : 리렌더링
  3. 언마운트 : 컴포넌트를 DOM에서 제거하는 것
• 라이프사이클의 특정 시기에 특정 작업을 처리하기 위해 "라이프사이클메서드" 사용
• 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능

마운트

• 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것
• 호출 메서드
  1. constructor( ) : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
  2. getDerivedStateFromProps( ) : props에 있는 값을 state에 넣을 때 사용하는 메서드
  3. render( ) : 준비한 UI를 렌더링하는 메서드
  4. componentDidMount( ) : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

업데이트

• 업데이트가 일어나는 4가지 경우
  1. props가 바뀔 때
  2. state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링 될 때
  4. this.forceUpdate로 강제로 렌더링을 트리거할 때
• 호출 메서드
  1. getDerivedStateFromProps( ) : props 변화에 따라 state 값에 변화를 주고 싶을 때 사용
  2. shouldComponentUpdate( ) : 컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정하는 메서드
     • true 반환 : 리렌더링
     • false반환 : 리렌더링 중단
  3. render( ) : 컴포넌트 리렌더링
  4. getSnapshotBeforeUpdate( ) : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
  5. componentDidUpdate( ) : 업데이트 작업 종료 후 호출하는 메서드

언마운트

• 컴포넌트를 DOM에서 제거하는 것
• 호출메서드
  • componentWillUnmount( ) : 언마운트 직전에 호출하는 메서드

컴포넌트 렌더링 도중 에러 잡아내기

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

• componentDidCatch( )
  • 렌더링 도중 에러가 발생했을 때 어플리케이션이 먹통이 되지 않고 오류 UI를 보여줄 수 있게 한다
  • 에러 발생시에 state를 변경하고 render에서 해당 처리를 구현하면 된다.
  • 주의할점은 자식 컴포넌트에서 발생하는 에러만 잡아낼 수 있고, 자신의 에러는 잡아낼수 없다.

자바스크립트 map ( ) 함수

• 리액트 프로젝트에서 반복적인 컴포넌트를 렌더링할 때 "map 함수"를 사용
• map( ) 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성
• 문법 : array.map( callback( currentValue, index, array), [thisArg] )
  • callback 함수 : 새로운 배열의 요소를 생성하는 함수 
    • currentValue : 현재 처리하고 있는 요소
    • index : 현재 처리하고 있는 요소의 index 값
    • array : 현재 처리하고 있는 원본 배열
  • thisArg (선택항목) : callback 함수 내부에서 사용할 this 레퍼런스
• key : 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용
  • key 값 설정시 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정
  • key값은 유일해야 함

동적 배열 렌더링 - 초기 상태 설정

import React, { useState } from 'react';

const DynamicArray = () => {
  const [names, setNames] = useState([
    { id: 1, text: 'kim' },
    { id: 2, text: 'lee' },
    { id: 3, text: 'park' }
  ]);
//   const [inputText, setInputText] = useState('');
//   const [nextId, setNextId] = useState(4);

  const nameList = names.map(name => <li key={name.id}>{name.text}</li>);

  return (
    <>
      <ul>{nameList}</ul>
    </>
  );
};

export default DynamicArray;

동적 배열 렌더링 - 데이터 추가 기능 : 배열의 concat 메소드 활용

- concat 은 두 개의 문자열을 하나의 문자열로 만들어주는 역활을 하는 함수이며,

   입력값을 문자열 대신 배열을 사용하면 두 개의 배열을 하나의 배열로 만들어주는 역활도 하는 함

import React, { useState } from 'react';

const DynamicArray = () => {
  const [names, setNames] = useState([
    { id: 1, text: 'kim' },
    { id: 2, text: 'lee' },
    { id: 3, text: 'park' }
  ]);
  const [inputText, setInputText] = useState('default text');
  const [nextId, setNextId] = useState(4);

  const handleChange = e => {
    setInputText(e.target.value);
  };

  const handleClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText
    });
    setNames(nextNames);
    setNextId(nextId + 1);
    setInputText('');
  };

  const nameList = names.map(name => <li key={name.id}>{name.text}</li>);

  return (
    <>
      <input value={inputText} onChange={handleChange}></input>
      <button onClick={handleClick}>add</button>
      <ul>{nameList}</ul>
    </>
  );
};

export default DynamicArray;

동적 배열 렌더링 - 데이터 삭제 기능 : 배열의 filter 메소드 활용

- filter 함수 : 지정된 조건에 맞는 요소들로 이루어진 새로운 배열 반환하는 함수

import React, { useState } from 'react';

const DynamicArray = () => {
  const [names, setNames] = useState([
    { id: 1, text: 'kim' },
    { id: 2, text: 'lee' },
    { id: 3, text: 'park' }
  ]);
  const [inputText, setInputText] = useState('default text');
  const [nextId, setNextId] = useState(4);

  const handleChange = e => {
    setInputText(e.target.value);
  };

  const handleClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText
    });
    setNames(nextNames);
    setNextId(nextId + 1);
    setInputText('');
  };

  const handleRemove = id => {
    const filteredNames = names.filter(name => name.id != id);
    setNames(filteredNames);
  };

  const nameList = names.map(name => (
    <li key={name.id} onDoubleClick={() => handleRemove(name.id)}>
      {name.text}
    </li>
  ));

  return (
    <>
      <input value={inputText} onChange={handleChange}></input>
      <button onClick={handleClick}>add</button>
      <ul>{nameList}</ul>
    </>
  );
};

export default DynamicArray;

Event

웹 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트라고 합니다.

예를들어 DOM 요소를 클릭하면 onClick 이벤트를 정의해 상호작용을 하게 됩니다.

리액트 이벤트 시스템 주의사항

1. 이벤트 이름은 카멜 표기법으로 작성
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
3. DOM 요소에만 이벤트 설정할 수 있다
   • 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 단지 props를 전달해 줄 뿐.

클래스 컴포넌트의 이벤트 핸들링

- state와 메서드 활용

1. 이벤트 발생시 생성되는 e객체를 이용한 이벤트 핸들링

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: ' '
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="message"
          placeholde="input"
          value={this.state.message}
          onChange={e => {
            this.setState({ message: e.target.value });
          }}
        ></input>
        <br />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({ message: ' ' });
          }}
        >
          reset
        </button>
      </div>
    );
  }
}

export default EventPractice;

2. 이벤트에 실행할 자바스크립트 코드 대신 함수 형태의 값 전달

=> 클래스에 메서드를 만들어 이벤트 리스너에 바인딩

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: ' '
  };

  handleChange = e => {
    this.setState({ message: e.target.value });
  };

  handleClick = () => {
    alert(this.state.message);
    this.setState({ message: ' ' });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="message"
          placeholde="input"
          value={this.state.message}
          onChange={this.handleChange}
        ></input>
        <br />
        <button onClick={this.handleClick}>reset</button>
      </div>
    );
  }
}

export default EventPractice;

3. input 여러개 다루기 

=> e.target.name의 "값"을 키로 가지는 객체를 생성

=> ref = 'key' ;  { [ref] : 'value' } ref의 값을 key로 하는 객체 생성  { 'key' : 'value' }

=> 하나의 이벤트 핸들링 메서드로 여러 키값을 가지는 객체 생성가능

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: ' ',
    username: ' '
  };

  // ref = 'key' ;  { [ref] : 'value' } ref의 값을 key로 하는 객체 생성  { 'key' : 'value' }
  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleClick = e => {
    alert(this.state.username + ' : ' + this.state.message);
    this.setState({ message: ' ' });
    this.setState({ username: ' ' });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="username"
          placeholder="username"
          value={this.state.username}
          onChange={this.handleChange}
        ></input>
        <br />
        <input
          type="text"
          name="message"
          placeholde="message"
          value={this.state.message}
          onChange={this.handleChange}
        ></input>
        <br />
        <button onClick={this.handleClick}>reset</button>
        <hr />
      </div>
    );
  }
}

export default EventPractice;

함수형 컴포넌트의 이벤트 핸들링

- useState 활용

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: ' ',
    message: ' '
  });

  const { username, message } = form;

  const handleChange = e => {
    const nextForm = {
      ...form,
      [e.target.name]: e.target.value
    };
    setForm(nextForm);
  };

  const handleClick = e => {
    alert(username + ' : ' + message);
    setForm({
      username: ' ',
      message: ' '
    });
  };

  return (
    <div>
      <input
        type="text"
        name="username"
        value={username}
        onChange={handleChange}
      ></input>
      <br />
      <input
        type="text"
        name="message"
        value={message}
        onChange={handleChange}
      ></input>
      <br />
      <button onClick={handleClick}>reset</button>
    </div>
  );
};

export default EventPractice;

컴포넌트 종류

1. 클래스형 컴포넌트
   • state 기능 사용가능
   • 라이프사이클 기능 사용가능
   • 임의의 메서드 정의 가능
   • constructor 작성시 반드시 super(props); 메서드를 호출하여 리액트의 Component 클래스가 지닌 생성자를 호출
   • render 함수가 반드시 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다
2. 함수형 컴포넌트
   • 클래스형 컴포넌트 보다 메모리 소모가 적음
   • state, 라이프사이클 대신 hooks 사용

Props

• properties의 줄인 표현으로 컴포넌트 속성을 읽을 때 사용하는 요소
• 해당 컴포넌트의 부모 컴포넌트에서 설정하며 컴포넌트 자신은 해당 props를 "읽기전용"으로 사용
• defaultProps : 부모컴포넌트에서 따로 props 값을 설정하지 않을 때 보여지는 기본값
• props.children : 태그 사이의 내용
• propTypes : 컴포넌트의 props의 타입값 지정. 지정한 타입과 일치하지 않으면 콘솔창에 에러 출력
• isRequired : 필수 props 지정
• 클래스형 컴포넌트에서 props 사용 : render함수에서 this.props로 조회

State

• 컴포넌트 내부에서 바뀔 수 있는 값
• 클래스형 컴포넌트의 state
  1. state는 객체형식
  2. state 초기화
     1. 클래스의 constructor에서 초기화
     2. 클래스 내부에서 바로 초기화 state = { ... } 
  3. render 함수에서 state를 조회할때는 this.state
  4. this.setState 메서드로 state값 변경 : setState의 인자로 전달해준 객체/함수로 state값 변경 
• 함수형 컴포넌트의 useState( )
  1. useState 함수 호출시 인자로 상태의 초깃값을 전달, 이때 반드시 객체형식이 아니어도 숫자, 문자열, 배열 모두 가능
  2. useState( ) 호출시 배열 반환
     1. 첫번째 원소 : 현재상태
     2. 두번째 원소 : 상태를 바꿔주는 함수
  3. 배열 비구조화 할당 (array destructuring assignment)을 통해 useState( ) 가 반환하는 배열의 원소들을 쉽게 바인딩 가능
• 클래스형 컴포넌트와 함수형 컴포넌트 모두 state 값을 변경할때는 setter를 이용

React란?

• 어플리케이션 구조 중에서 View만을 담당하는 라이브러리
• React is a JavaScript library for building user interfaces
• 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 않고 그냥 기존 뷰를 날려 버리고 처음부터 새로운 데이터를 가지고 render함수를 호출하여 새로 렌더링 함으로써 어플리케이션의 구조를 간단화
  -> render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교
  -> 둘의 차이를 알아내 최소한의 연산으로 DOM 트리 업데이트

React 특징

1. VirtualDOM을 사용한 화면 조작
   • 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
   • 이전 Virtual DOM에 있던 내용과 현재 내용을 ‘diffing’ 알고리즘을 사용하여 변화를 확인
   • 바뀐 부분만 실제 DOM에 적용
   • 리액트와 virtual dom이 제공하는 것은 "업데이트 처리의 간결성"
     => 지속적으로 데이터가 변화하는 대규모 어플리케이션에 사용하는것이 적절
2. 컴포넌트(Components)와 단방향 데이트 흐름(Unidirectional data flow)
   • React는 Component로 구성, 개발 할 때 컴포넌트 단위로 고려하는 것이 좋음
   • React에선 데이터가 단방향으로 전송 ->  데이터 추적 및 디버깅이 상대적으로 쉬움. 이러한 특징을 살려서 Flux 패턴을 사용한 Redux라이브러리를 많이 활용함

Module Bundler

• 각각의 모듈들에 대해 의존성 관계를 파악한 후 모듈들을 하나의 파일로 그룹핑하는 소프트웨어
• 브라우저에는 모듈을 불러오는 기능이 없으므로 브라우저에 실행 가능한 자바스크립트 파일을 만들기 위해 번들러를 사용
• 대표적인 번들러 : webpack, parcel, ...
• 웹팩 로더 : svg, css 파일들을 불러오는 웹팩의 기능
  • ex) css-loader : css파일을 불러옴
  • babel-loader : 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법을 구버전 웹 브라우저에서도 실행 가능하도록 ES5 문법으로 변환

JSX

• JSX it is a syntax extension to JavaScript
• JSX 문법
  1. 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 반드시 부모요소 하나로 감싸야 한다 => <div></div> or <></>
  2. 자바스크립트 표현식 : JSX 내부에서 JS 코드를 { } 로 감싼다.
  3. 조건부연산자 : JSX 내부 자바스크립트 표현식에 if문을 사용할 수 없으므로 조건부연산자(삼항연산자)를 사용
  4. clssName : class 속성 대신 className 속성 설정
  5. 주석 : JSX 내부에서는 {/* 주석을 이렇게 작성 해야한다 */}

Components

• Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
• Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 

Props

• React passes JSX attributes to a user-defined component as a single object. 
  We call this object "props".
• 컴포넌트 속성 설정및 부모 컴포넌트의 데이터를 자식에게 전달할 때 사용
• props값은 해당 부모 컴포넌트에서만 설정 가능

 State

• State는 컴포넌트 내부에서 읽기(read)와 변경(update) 가능한 데이터
• this.setState() 메서드를 사용하여 State값을 update
• State값을 변경해서 화면(view)이 변경되면 render()가 자동으로 재실행

Life Cycle (React v16.3 이후)

• Mounting
   : constructor  ->  getDerivedStateFromProps  ->  render  ->  componentDidMount
• Updating - New props
   : getDerivedStateFromProps   -> shouldComponentUpdate -> render  -> getSnapshotBeforeUpdate -> componentDidUpdate
• UPdating - setState()
  : shouldComponentUpdate -> render  -> getSnapshotBeforeUpdate -> componentDidUpdate
• Unmounting
  : componentWillUnmount

FLUX 패턴/아키텍처

• Action –> Dispatcher –> Store –> View 구조를 통해 데이터를 전달, 업데이트 하는 패턴
• View에서 Dispatcher로 Action을 보낼 수 있으며, Dispatcher는 작업이 중첩되지 않도록 Action을 스케쥴링 (사실상 대기)
• FLUX 패턴/아키텍처를 좀 더 유연하게 사용할 수 있도록 ‘Redux’라는 라이브러리를 많이 사용

1. basic react
2. react component
3. event handling
4. component 반복
5. lifecycle
6. hooks
7. component styling
8. todo project
9. immer
10. react-router, SPA
11. Asynchrony
12. redux
13. todo project + redux
14. middleware
15. backend : express + mongodb
16. MEMOAPP project : https://velopert.com/tag/reactcodelab

참고

- 리액트를 다루는 기술

- 인프런 : https://www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert#description 

1. 기본개념

1-1. 쿠키, 세션

- 쿠키

: '키-값'의 쌍의 형식으로 웹사이트에 접속할 때 자동적으로 만들어지는 임시 파일.

1. 서버는 요청에 대한 응답으로 유저가 본 내용, 세션아이디(ID),  IP 주소 등의 정보를 쿠키에 담아 클라이언트에게 보냄

2. 서버로 부터 쿠키가 오면 웹 브라우저는 쿠키를 저장하고 클라이언트가 요청할 때마다 쿠키를 동봉해서 보냄

3. 서버는 요청에 들어있는 쿠키를 읽어서 사용자가 누구인지 파악

- 세션

: 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점동안
같은 사용자(정확하게는 브라우저)로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술.

즉, 방문자가 웹서버에 접속해 있는 상태를 하나의 단위로 보고 세션이라고 칭함.

- 세션 기반 인증 시스템

: 서버가 세션저장소(서버의 메모리, 디스크, 데이터베이스)에 사용자 정보를 저장함으로써 사용자가 로그인 중임을 기억하는 방식.

1. 유저가 처음 로그인하면 서버는 세션 저장소에 사용자의 정보를 조회하고 response-header field인 set-cookie 값으로 클라이언트 식별자인 session-id(임의의 긴 문자열)를 발행

2. 발행된 session-id는 세션 저장소와 쿠키에 저장

3. 이후 유저가 다른 요청을 보낼 때마다 쿠키에 담긴  session-id를 가지고 서버의 세션 저장소에서 세션을 조회한후 로그인 여부를 결정하여 작업을 처리하고 응답함

- 세션기반인증시스템 단점

1. 서버를 확장하기가 번거로워짐

: 서버의 인스턴스가 여러개가 되면, 모든 서버끼리 같은 세션을 공유해야 하므로 세션 전용 DB를 만들어야 하고 신경 쓸 것이 많아짐

1-2. 토큰

- 토큰 

: 로그인 이후 서버가 만들어 주는 문자열. 

문자열 안에는 사용자의 로그인 정보와 토큰이 서버에서 발급 되었음을 증명하는 서명이 들어있음.

서명 데이터는 해싱 알고리즘으로 만들어지고 서명이 있음으로 토큰의 무결성(정보가 변경되거나 위조되지 않음)을 보장.

- JWT

: Json Web Token, 데이터가 JSON형식으로 이루어진 토큰

- 토큰 기반 인증 시스템

1. 클라이언트가 로그인을 하면 서버에서 클라이언트에게 해당 사용자의 정보를 지니고 있는 토큰을 발급받음

2. 추후 클라이언트가 다른 API를 요청할 때 마다 발급받은 토큰을 포함

3. 서버는 토큰이 유효한지 검사하고 결과에 따라 작업을 처리하고 응답

4. 기한이 만료되면 토큰을 지우고 재로그인 하게 함

- 토큰 기반 인증 시스템 장점

클라이언트가 로그인 상태를 지닌 토큰을 가지고 있으므로

1. 서버에서 사용자 로그인 정보를 기억하기 위해 사용하는 리소스가 적다

2. 서버의 인스턴스가 늘어나도 서버끼리 사용자의 로그인 상태를 공유할 필요가 없으므로 서버의 확장성이 높음

-토큰 기반 인증 시스템 단점

1. 토큰 수명이 짧으면 토큰기한이 만료될 때마다 다시 로그인 해야됨

2. 토큰 수명이 길면 클라이언트의 토큰이 해독되어 악용되는 보안의 문제

1-3. 세션기반인증시스템과 토큰기반인증시스템 공통점과 차이점

- 공통점

1. 클라이언트가 고유 식별자(세션아이디, 토큰)을 갖고 그 식별자를 바탕으로 인증을 처리

- 차이점

1. 세션기반인증시스템에서는 식별자에 대한 정보를 서버의 세션저장소에 저장

2. User 스키마/모델

2-1. 모델

2-2

- async 함수에서 발생한 오류는 async 함수안에서 호출 된 또다른 asynce 함수의 try/catch로 예외처리가 가능

-> wrapping함수 구현

const wrapAsync = asyncFn => {
    if (asyncFn.length <= 3) {
        return (async (req, res, next) => {
            try {
                return await asyncFn(req, res, next)
            } catch (error) {
                return next(error)
            }
        })
    }
    else {
        return (async (err, req, res, next) => {
            try {
                return await asyncFn(err, req, res, next)
            } catch (error) {
                return next(error)
            }
        })
    }; 
};

module.exports = wrapAsync;

- try-catch를 이용해 상위 래퍼 메소드에서 에러 핸들링을 해주기 때문에 모든 메소드에 try-catch를 사용할 필요x

- async — await가 필요한 부분에만 wrapwrapAsync 메소드를 사용

-사용예시

//routing middleware
const fakeWait = () => new Promise((resolve) => setTimeout(resolve, 100));
 
async function asyncRoute(req, res) {
  await fakeWait();
  res.send({ ok: true });
}
router.get('/async', wrapAsync(asyncRoute));

//error handling
app.use((err, req, res, next) => {
  res.status(500);
  res.json({
    error: err.message,
  });
});

참고

- https://www.npmjs.com/package/express-wrap-async

- https://medium.com/@changjoopark/express-%EB%9D%BC%EC%9A%B0%ED%8A%B8%EC%97%90%EC%84%9C-async-await%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%A0%A4%EB%A9%B4-7e8ffe0fcc84

* react + redux-thunk + styled-component + express + mongoDB