태야

<내 코드>

n = int(input())
arr = [list(map(int, input().split())) for _ in range(n)]

counts = [1 for _ in range(n)]

for i in range(n):
    for j in range(n):
        if((arr[i][0] < arr[j][0]) and (arr[i][1] < arr[j][1])):
            counts[i] += 1

print(*counts)

자신보다 키, 몸무게 모두 큰 사람 수를 단순히 모두 비교하면 되는 문제다.

순서

1. 리덕스 리듀서 모듈 생성(Ducks Pattern) - 한 파일에 액션, 액션 생성 함수, 리듀서를 작성하는 방식
2. 각 리듀서 모듈에서 액션타입(TS에서의 타입이 아님), 액션 생성 함수, 액션 객체 타입 선언(TS에서의 타입), 초기값, 기본값 타입들, 리듀서를 작성한다.
3. '루트 리듀서'역할을 하는 index.ts를 만들어, 리덕스의 combineReducers를 이용해 만든 리듀서 모듈들을 하나로 통합해 export 한다.
4. 프로젝트 전체에 리듀서를 적용하고, 스토어에 접근 가능하도록 앱의 최상위 파일에서 store를 생성해 Provider를 이용해 적용시킨다.
5. 필요한 컴포넌트들을 작성한다. 여기서, useSelector , useDispatch 를 이용해 각각 조금 더 쉽게 리듀서를 연결하고 스토어에 접근해 값을 사용하고, 액션을 발생시켜 상태를 변화시킨다.

리듀서 모듈 생성

리덕스 사용에 필요한 액션, 액션 생성함수, 리듀서를 한 파일에 작성한다. 이러한 방식을 'Ducks 패턴'이라 한다.

우선, 필요한 액션 타입을 상수로 설정한다.

const ADD_TODO = "todo/ADD_TODO" as const;
const REMOVE_TODO = "todo/REMOVE_TODO" as const;
const TOGGLE_TODO = "todo/TOGGLE_TODO" as const;

위와 같이 타입스크립트 문법인 Type Assertions(타입 단언)을 사용해 액션 타입에 대한 타입 추론의 범위를 줄여 string 타입이 아닌 명확히 액션 타입을 추론하도록 해준다. 액션 타입들을 상수화 시켜두면 추후에 코드 수정에 있어 용이해진다.

다음으로 액션 생성 함수를 작성한다. 모듈 외부에서 사용할 수 있도록 export 해준다. Context api나 Redux 에서 액션을 dispatch를 이용해 액션을 발생시킬 때 해당 액션 생성 함수들을 사용한다.

// Action Creators
export const addTodo = (text: string) => ({ type: ADD_TODO, payload: text });
export const removeTodo = (id: number) => ({ type: REMOVE_TODO, payload: id });
export const toggleTodo = (id: number) => ({ type: TOGGLE_TODO, payload: id });

다음으로 액션 객체에 대한 타입들을 설정해줘야 한다.

// 액션 객체 타입 설정
type TodoAction =
  | ReturnType<typeof addTodo>
  | ReturnType<typeof removeTodo>
  | ReturnType<typeof toggleTodo>;

ReturnType<T> 는 유틸리티 타입의 한 종류로서 전역적으로 사용 가능하다. 기능으로는 함수 T의 반환 타입으로 구성된 타입을 만들어준다. 아래에 간단한 예시를 살펴보자.

declare function f1(): { a: number, b: string }
type T0 = ReturnType<() => string>;  // string
type T1 = ReturnType<(s: string) => void>;  // void
type T2 = ReturnType<(<T>() => T)>;  // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
type T5 = ReturnType<any>;  // any
type T6 = ReturnType<never>;  // any
type T7 = ReturnType<string>;  // 오류
type T8 = ReturnType<Function>;  // 오류

ReturnType으로 인한 위의 액션 객체의 타입은 다음과 같이 될 것이다. 앞서 Type Assertions으로 const로 지정을 해주지 않았다면 제대로 동작하지 않을 수도 있다.

다음으로 리듀서 함수에 전달 할 state에 대해 필요한 타입과 초기값들을 지정해준다.

export type Todo = {
  id: number;
  text: string;
  isToggle: boolean;
};

export type Todos = Todo[];

export const initialState: Todos = [
  {
    id: 0,
    text: "타입스크립트 투두리스트",
    isToggle: false
  },
  {
    id: 1,
    text: "타입스크립트 리덕스",
    isToggle: false
  }
];

마지막으로 앞서 작성한 state와 action 객체에 대한 타입을 이용해 리듀서 함수를 작성한다.

// Reducer
export default function todoReducer(state: Todos = initialState, action: TodoAction): Todos {
  switch (action.type) {
    case ADD_TODO:
      const id = Math.max(...state.map((todo) => todo.id)) + 1; // 현재 있는 리스트 중 가장 큰 id값에 +1 한다.

      return state.concat({
        id,
        text: action.payload,
        isToggle: false
      });

    case REMOVE_TODO:
      return state.filter((todo) => todo.id !== action.payload);

    case TOGGLE_TODO:
      return state.map((todo) =>
        todo.id === action.payload
          ? { ...todo, isToggle: !todo.isToggle }
          : todo
      );

    default:
      return state;
  }
}

최종적인 리듀서 모듈의 코드는 다음과 같다.

// src/modules/todo.ts


// Action Type
const ADD_TODO = "todo/ADD_TODO" as const; // Type Assertions(현재 나타내는 타입보다 더 구체적인 타입을 나타내려 할 때 이용)
const REMOVE_TODO = "todo/REMOVE_TODO" as const;
const TOGGLE_TODO = "todo/TOGGLE_TODO" as const;

// Action Creators
export const addTodo = (text: string) => ({ type: ADD_TODO, payload: text });
export const removeTodo = (id: number) => ({ type: REMOVE_TODO, payload: id });
export const toggleTodo = (id: number) => ({ type: TOGGLE_TODO, payload: id });

// 액션 객체 타입 설정
// ReturnType --> 타입스크립트의 특정함수의 반환 타입을 추출해내는 제네릭 타입으로
// 이를 통해 interface 중복작성을 피할 수 있다.
type TodoAction =
  | ReturnType<typeof addTodo>
  | ReturnType<typeof removeTodo>
  | ReturnType<typeof toggleTodo>;

//---- 리듀서에 전달 할 state에 대한 처리 ----
export type Todo = {
  id: number;
  text: string;
  isToggle: boolean;
};

export type Todos = Todo[];

export const initialState: Todos = [
  {
    id: 0,
    text: "타입스크립트 투두리스트",
    isToggle: false
  },
  {
    id: 1,
    text: "타입스크립트 리덕스",
    isToggle: false
  }
];

// ------------------------------------

// Reducer
export default function todoReducer(
  state: Todos = initialState,
  action: TodoAction
): Todos {
  switch (action.type) {
    case ADD_TODO:
      const id = Math.max(...state.map((todo) => todo.id)) + 1;
      return state.concat({
        id,
        text: action.payload,
        isToggle: false
      });

    case REMOVE_TODO:
      return state.filter((todo) => todo.id !== action.payload);

    case TOGGLE_TODO:
      return state.map((todo) =>
        todo.id === action.payload
          ? { ...todo, isToggle: !todo.isToggle }
          : todo
      );

    default:
      return state;
  }
}

Root reducer 만들기

리덕스의 combineReducers를 이용해 만든 리듀서 모듈들을 하나로 통합해 만든 루트 리듀서 파일을 export 한다.

// src/modules/index.ts

import { combineReducers } from "redux";
import todoReducer from "./todo";

const rootReducer = combineReducers({
  // 여러 리듀서 모듈들을 하나로 병합한다.
  todoReducer
});

export default rootReducer;
export type RootState = ReturnType<typeof rootReducer>;

최상위 컴포넌트 Provider 감싸기

최상위 컴포넌트 파일인  루트의 index.tsx 파일에서 <Provider> 컴포넌트로 하위 모든 컴포넌트에서 store에 접근이 가능하게 해 준다. 

// ./index.tsx

import { render } from "react-dom";
import React from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";

import rootReducer from "./modules";
import App from "./App";

const store = createStore(rootReducer); // store 생성

const rootElement = document.getElementById("root");
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

필요한 컴포넌트들 작성

Redux를 사용하기 위한 준비를 다 마쳤다. 이제 컴포넌트들을 작성하고 Redux 기능들을 활용하면 된다.

src 폴더 안에 components폴더를 만들고, TodoApp.tsx 와 TodoAppContianer.tsx파일을 만든다. 각각의 코드는 다음과 같다.

// /components/TodoApp.tsx

import React, { useState } from "react";
import { Todos, Todo } from "../modules/todo";
import { useDispatch } from "react-redux";
import { addTodo, toggleTodo, removeTodo } from "../modules/todo";

type Props = {
  todos: Todos;
};

const TodoApp = ({ todos }: Props) => {
  // 디스패치 함수에 파라미터로 액션객체를 넣어주면 스토어로 전달하여 액션을 발생시키고,
  // 리듀서 모듈에 이 액션이 있다면 새로운 상태로 바뀌게 되는것
  const dispatch = useDispatch();
  const [input, setInput] = useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    dispatch(addTodo(input));
    setInput("");
  };

  const handleClick = (id: number) => {
    dispatch(toggleTodo(id));
  };

  const handleRemove = (id: number) => {
    dispatch(removeTodo(id));
  };

  const done = {
    textDecoration: "line-through"
  };

  return (
    <>
      <div>
        <form onSubmit={(e) => handleSubmit(e)}>
          <input value={input} onChange={(e) => setInput(e.target.value)} />
          <button type="submit">등록</button>
        </form>
      </div>
      <div>
        {todos.map((todo) => {
          const { id, text, isToggle } = todo;
          return (
            <div
              key={id}
              onClick={() => handleClick(id)}
              style={isToggle ? done : undefined}
            >
              {text}
              <button onClick={() => handleRemove(id)}>삭제</button>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default TodoApp;

위의 코드에서 dispatch 함수의 인자로 '액션 생성함수(action creator)'를 넣어줬다. 즉, modules 폴더에서 작성한 리듀서 파일 안의 액션 생성 함수들의 결과로 '액션 객체' 값을 리턴 받아 dispatch 하게 된다. 그런 다음 reducer에서 액션 타입에 맞는 로직을 수행하게 되고 store의 상태 값을 변화시키게 된다.

// /components/TodoAppContainer.tsx

import React from "react";
import TodoApp from "./TodoApp";
import { useSelector } from "react-redux";
import { RootState } from "../modules";

const TodoAppContainer = () => {
  // useSelector :: 간단하게 리듀서 모듈과 연결해 데이터를 받아올 수 있다.
  const todos = useSelector((state: RootState) => state.todoReducer);
  return <TodoApp todos={todos} />;
};

export default TodoAppContainer;

useSelector는connect 를 통해 상태 값을 조회하는 것보다 훨씬 간결하게 작성하고 코드 가독성이 상승되는 장점이 있는 함수다.

최종적으로 다음과 같이 나타나게된다.

Redux는 애플리케이션 상태를 관리하기 위한 오픈 소스 JavaScript 라이브러리다.

1. Redux 등장 배경

리덕스가 등장하기 이전 프론트엔드에서 데이터 흐름(형상)을 관리하는 방식은 MVC 패턴이었다. MVC 패턴의 큰 특징 중 하나가 ‘양방향 데이터 흐름’이다. 모델이 변경된다면 뷰 또한 변경되고, 사용자에 의해 뷰에서 변경이 일어난다면 모델 또한 변경된다. 이러한 양방향 데이터 흐름은 설계하기 간단하고 코드 작성하기 쉬운 장점이 있다. 하지만 애플케이션 규모가 커진다면 문제가 생긴다. 한 개의 모델이 여러 개의 뷰를 조작하고 한 개의 뷰가 여러 개의 모델을 조작한다면 데이터 흐름을 이해하기 힘들어진다. 버그를 찾기 어려워지고 데이터 흐름을 추적하는 데 많은 시간을 투자해야 하는 단점이 있다.

• Model— 데이터의 형식이나 구조를 관리한다. 모델에 맞지 않는 데이터는 흐름을 제어받을 수 있다.

• View — 코드가 사용자에게 보여지는 부분을 담당한다. 사용자에게 보여지는 모습과 형태를 관리한다.

• Controller — 변화하는 데이터를 관리한다. View에서 발생하는 이벤트로 변경되는 데이터나 서버로부터 받은 변경된 데이터를 Model과 View에 업데이트해준다.

2. Flux 등장

페이스북에서 MVC 패턴으로 데이터 흐름을 관리하는 데 많은 어려움을 겪고 있었고 그의 대안으로 Flux라는 새로운 아키텍처 패턴을 개발하였다.

Flux는 MVC 패턴에서 겪은 복잡한 상황을 개선하는 것이 목적이었고 그 방법으로 ’ 단방향 데이터 흐름’을 적용한 것이다.

• View는 MVC 패턴과 달리 데이터를 변경시키지 않고 Action을 넘겨준다.

• Action은 반드시 Dispatcher를 지나게 되고 Dispatcher를 통해서 데이터 변경이 일어나고 View는 변경된 데이터를 Store를 통해서 전달받는다.

이러한 단방향 데이터 흐름은 기존의 MVC 패턴에 있던 ‘상태의 전이’(뷰와 모델 사이의 데이터 변경이 연결된 수많은 곳으로 따라 변경되는 현상) 현상을 없애주고 ‘예측 가능하다’는 특징을 갖는다.

3. Redux의 등장

2015년에 Dan Abramov에 의해서 React + Flux의 구조에 ‘Reducer’를 결합한 ‘Redux’가 등장하게 된다.

리덕스의 특징 3가지

1. Single source of truth 

모든 상태는 하나의 스토어 안에 하나의 객체 트리 구조로 저장

2. State is read-only 

상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐이다. 데이터의 변경은 Reducer만 할 수 있다. Reducer 이외의 공간에서는 데이터(상태)는 읽기 모드인 것이다.

3. Changes are made with pure functions 

변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.

• 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다.

• 이전의 상태는 절대로 건드리지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다.

• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결괏값을 반환해야만 합니다.

만약 매번 같은 입력에 대해 같은 결과를 리턴하지 않는 경우는, 예를 들어 랜덤 숫자를 생성한다던지 혹은, 네트워크에 요청을 한다던지 등 이러한 작업은 결코 순수하지 않은 작업이므로, 리듀서 함수의 바깥에서 처리해줘야 한다. 그런 것을 하기 위해서, 리덕스 미들웨어를 사용할 수 있다.

리덕스의 구성요소

- Store

상태를 관리하고 저장되는 장소이며, 직접적으로 스토어에 접근해서는 안되고 dispatch, subscribe, getState 같은 함수들을 이용해 스토어의 state에 접근한다. 스토어는 현재의 앱 상태와, 리듀서가 들어가 있고, 추가적으로 몇 가지 내장 함수들을 포함하고 있다.

• Dispatch 함수 :  액션을 발생시켜 store에 상태 변화가 필요하다는 것을 알리는 역할을 한다. 호출된 액션은 reducer 함수를 호출시키고, 액션에 맞는 로직과 상태 변화 과정을 거친다.

• getState 함수 : 현재 애플리케이션의 state 값에 접근한다.

• Subscribe 함수 : 함수 형태의 값을 파라미터로 받고, action이 dispatch 될 때마다 전달받은 함수를 호출한다.

- Reducer 함수

dispatch에 의해 액션이 전달되면, 액션 객체 값과 기존 state 값을 참조해 새로운 state 값을 반환해주는 역할을 한다.

const reducer = (currentState, action) => {
	
    // 상태 업데이트 로직
    
    return newState;
}


const reducer = (prevState, action) => {
  switch(action.type) {
    case 'SAVE_MONEY' :
    return {
      ...
    }
    default ...
  }
}

- Action 객체

액션 객체는 반드시 type 영역을 필수로 설정해줘야 하며, 그 외의 어떤 데이터는 개발자가 마음대로 넣을 수 있다.

// 액션 객체

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "액션 객체 데이터"
  }
}

// 액션 생성함수 --> 인자를 받아와 액션 객체를 반환해주는 함수다.
const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

메모이제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 자료구조에서 꺼내 재사용하는 것을 말한다. 메모이제이션의 대표적인 예로는 동적계획법의 탑다운 방식이 있다.

1. 기본 개념

• useMemo와 useCallback는 메모이제이션 기능을 지원하는 리액트의 내장 훅으로, 퍼포먼스 최적화를 위하여 사용된다.

• useMemo는 메모이제이션된 값을 반환한다.

• useCallback은 메모이제이션된 콜백을 반환한다.

리액트는 실제로는 상태가 변경되는 컴포넌트와 그 이하의 모든 자식 컴포넌트가 랜더링의 대상이 된다. 문제는 자식 컴포넌트의 상태가 변경되지 않아도(갱신될 필요가 없어도) 불필요한 랜더링이 일어난다는 것이다. 자바스크립트에서 함수도 참조형 데이터이기 때문에 늘 새로운 값으로 취급되어 동일성을 보장받지 못하므로 리액트에서 매번 새로운 렌더링 대상이 된다.

2. useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

“생성(create)” 함수와 그것의 의존성 값의 배열을 전달해야 한다.useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산할 것이다. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해 준다.

• 배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 된다.

• useMemo로 전달된 함수는 렌더링 중에 실행된다.

• 무분별하게 useMemo를 사용하면 오히려 성능이 저하될 수 있다. 따라서 최대한 사용하지 않고 useEffect Hook 등을 활용해 비동기적으로 동작하도록 고안하는 것이 좋다. (리액트 공식 문서에서 추천하는 방식)

3. useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

콜백과 그것의 의존성 값을 배열로 만들어 인자로 전달하며, 메모이제이션된 콜백함수를 반환한다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경된다. 이것은, 불필요한 렌더링을 방지하기 위해(예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용하다.

• useCallback(fn, deps)은 useMemo(() => fn, deps)와 같다고 한다. 

• useEffect와 마찬가지로 두 번째 인자로 빈 배열([])을 넣으면 어떤 상태 값에도 반응하지 않으며, 두 번째 인자로 아무것도 넣지 않으면 모든 상태 변화에 반응한다.