이전 포스트에서 함수형 프로그래밍의 간략한 소개와 몇가지 예제 코드를 구현했었다. 오늘은 이전 포스트에 이어 다음 내용을 진행하려고 한다.

회원 목록 중 한명 찾기

회원 목록 중 id 값으로 해당 id 값을 가진 회원 한 명을 찾고자 한다.

1
2
3
4

console.log(
  filter(users, function (user) { return user.id === 3 })[0]
)
// {id: 3, name: "BJ", age: 32}

filter를 통해 걸러낸 후 [0]으로 user를 얻어냈고 원하는 결과를 얻어냈기는 했다. 위 처럼 filter를 사용하여 찾을 수 있지만 filter 함수는 무조건 list.length 만큼 predicate가 실행되기 때문에 효율적이지 못하고, 동일 조건에 값이 두 개 이상이라면 두 개 이상의 값을 찾는다.

최근 사내에서 함수형 프로그래밍을 사용하여 기존 코드의 리팩토링을 시작했다.
함수형 프로그래밍 해야지 해야지 하고 항상 미뤄왔던 스터디인데 실무에서 사용하기에
터무니없이 실력이 부족함을 느껴 스터디를 시작하고자 한다.

기본적으로 함수형 자바스크립트 프로그래밍 책을 기반으로 진행하며, 필요한 내용이나 궁금한 내용은 구글링을 통해 진행한다.

도서 링크: 함수형 자바스크립트 프로그래밍

함수형 자바스크립트 소개

• 함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 최대한 멀리하고 조합성을 강조하는 프로그래밍 패러다임이다.
• 함수형 프로그래밍이 부수 효과를 최대한 멀리하는 이유
  1. 오류를 줄이기 위함.
  2. 조합성 혹은 모듈화 수준을 높이기 위함.

함수형 프로그래밍을 검색하면 나오는 예제

1
2
3
4
5
6
7

function addMaker(a) {
  return function(b) {
    return a + b;
  }
}

addMaker(10)(5);

함수형 자바스크립트에 관심을 가져 본 적이 있다면 아마 위 예제와 같은 코드를 봤을 것 이다. 커링 혹은 부분 적용과 관련된 코드들이다.
함수를 리턴한다거나 괄호가 많은 코드들을 처음 보면 난해하고 생소하게 느껴진다.

addMaker는 함수를 값으로 다루는 함수다. addMaker에서는 단 하나의 값이 선언되며 그 값은 함수다.
addMaker(10)의 결과는 function(b) { return 10 + b }; 와 같다.
이후 리턴된 함수를 바로 실행해줬기 때문에 결과값은 15가 된다.

sequelize model 정의

• sesquelize model 을 정의하는 방법은 여러가지 있지만, sequelize 의 define 메소드를 이용해 정의하고자 한다.
• model이란 데이터베이스의 테이블에 해당되며, 객체내의 key 값은 컬럼으로 생성된다.

  1 2 3 4 5 6 7 8 9 10 11

  return sequelize.define( "User", { username: { type: DataTypes.STRING(128) }, job: { type: DataTypes.STRING } } )

useReducer

redux와 같이 action을 사용하여 useState보다 다양하게 state 를 조작할수 있게 해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    case "HANDLE_CHANGE":
      return { ...state, [action.target.name]: action.target.value };
    default:
      return state;
  }
};


const CountReducer = () => {
  const [state, dispatch] = useReducer(reducer, {
    count: 0,
    name: "",
    nickname: ""
  });

  const handleChange = e => {
    dispatch({ type: "HANDLE_CHANGE", target: e.target });
  };

  return (
    <div>
      <p>current count: {state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>increase</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>decrease</button>
      <div>
        <input name="name" value={state.name} onChange={handleChange} />
        <input name="name" value={state.nickname} onChange={handleChange} />
      </div>
    </div>
  );
};

export default CountReducer;

useState

사용방법

useState 는 이름에서 유추하는것과 같이 함수형 컴포넌트에서도 state를 사용할 수 있게 해준다.

사용방법은 해당 기능을 import 한 후 [state 이름, state이름을 변경시켜줄 setState와 같은 이름] = useState(초기값) 이다.

리액트 16.8 버전에서 Hooks 라는 새로운 기능이 추가 되었다.
해당 기능은 간단히 설명하자면 기존 리액트 component 에서 state 와 라이프 사이클을 사용하려면 class 로 component 를 생성해야 했다.
이말은 즉, 함수형 component 에서는 props 를 받아 사용할 수 있지만, state와 라이프 사이클을 사용할 수 없었다.

Next.js는 Client-Side-Rendering 을 사용하는 react가 아닌 SSR(Server-Side-Rendering) 방식을 사용하는 react framework 이다.
해당 글은 Next.js에서 배포시 참고하면 좋을 내용으로 Next.js가 뿐만 아니라 react, Node 에서도 사용 가능하다.

이슈

1. react에서 setState를 하지 않았음에도 state가 변경되는 현상
2. api 구축중 객체를 변경하지 않았음에도 객체 값이 변경되는 현상

react 프로젝트 개발중 위의 이슈가 자주 발생하고 있었다.
해당 이슈가 왜 발생하는지, 어떻게 해결할 수 있는지 기록해두려고 한다.
해당 글은 react 뿐만 아니라 javascript 언어를 사용한다면 꼭 알아둬야 된다고 생각한다.

React를 사용하기 전 라이프사이클에 대해 확실하게 알고 사용하는 것이 좋다.
라이프사이클 이란 DOM이 그려지기 전후, DOM 상태가 변경되기 전후에 따라 실행되는 method 이며 상황에 맞는 action 을 취하게 해준다.
github에 예제 코드를 보면서 해당 글을 읽으면 도움이 될 수 있으며 clone 받아 직접 테스트 해볼 수도 있다.code 보기

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing