함수형 프로그래밍 vs 객체지향 프로그래밍 (feat. 리액트, 리액트 hooks) - FE study8

1. 객체지향 프로그래밍 (OOP)

• 캡슐화 : 재사용 될만한 상태나 메소드들을 저장해두고 사용할 때 마다 불러올 수 있게 함.이렇게 작성한 코드들은 은닉성을 띈다.

• 객체 : 이렇게 class로 캡슐화된 코드들을 필요할 때마다 복사해서 하나의 데이터(object) 로 사용.

2. 함수형 프로그래밍 (functional)

• 모듈화 : 함수형 프로그래밍의 핵심. 다른 외부요인에 영향을 받지 않고 자신의 맡은 바를 실행. (=순수함수 : same input -> same output)

• 목적성 : 알고리즘을 명시하는 것 보다 목표(함수)를 명시하는데 중심. (선언형)

• 객체 : 함수도 하나의 객체로서 작용. 적재적소에 해당 함수를 적절한 input과 함께 쓰는 것이 필요하다.

둘은 상반되는 개념이 아니고 하나의 프로그램 방식이다. 공통적으로는 반복을 줄이고 효율적인 작업을 위해 생겨났다.

3. 리액트에서의 객체지향 프로그래밍

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

class Prac extends Component {
  state={}
  render() {
    return (
      <div>
        // ...
      </div>
    );
  }
}

export default Prac;

리액트에서는 컴포넌트라는 클래스를 사용하고 내부적으로 state 라는 상태와 props라는 속성을 갖는다.

4. 리액트에서의 함수형 프로그래밍

import React from 'react';

const Prac = ( {props} ) => {
  return (
    <div>
      
    </div>
  );
};

javascript ES6 화살표함수로 작성한 함수형 컴포넌트. 비구조화 할당을 통해 props를 인자로 받아서 쓸 수 있다. 그리고 함수형 컴포넌트는 state를 가질 수 없다고 알고 있었는데...

5. 리액트 hooks

리액트 hooks 를 통해 함수형 컴포넌트에서도 state를 설정하고 유지하는 것 뿐 아니라 컴포넌트 생명주기(lifecycle) 메소드들과 비슷한 기능도 사용할 수 있게 되었다.

hooks 도 함수형 프로그래밍의 특징인 목적성 을 추구함에 탄생.

리액트 hooks 모음