React를 위한 함수형 JavaScript 패턴 전체 지도

1. React와 함수형 JavaScript의 관계

React가 함수형 프로그래밍 언어인 것은 아니지만, 함수형 프로그래밍의 핵심 아이디어를 매우 많이 활용합니다.

UI = f(state, props)

2. 함수 기본 필수

function add(a, b) {
  return a + b
}

const add = (a, b) => {
  return a + b
}

const double = value => value * 2

• 함수 선언식
• 함수 표현식
• 화살표 함수
• 매개변수 / 인자
• return / 암시적 return
• 기본 매개변수
• 나머지 매개변수 ...args
• 함수를 변수·객체·배열에 저장
• 함수를 다른 함수에 전달
• 함수에서 함수 반환

3. 콜백 함수 최우선

React 이벤트와 배열 메서드는 거의 전부 콜백과 연결됩니다.

function handleClick() {
  console.log('click')
}

<button onClick={handleClick}>버튼</button>

setCount(prev => prev + 1)

• 이벤트 콜백
• 익명 콜백
• 화살표 콜백
• map / filter / find / reduce 콜백
• state setter 콜백
• 함수를 props로 전달

4. 배열 메서드 최우선

목록 렌더링

users.map(user => (
  <User key={user.id} user={user} />
))

삭제

setUsers(prev =>
  prev.filter(user =>
    user.id !== targetId
  )
)

수정

setUsers(prev =>
  prev.map(user =>
    user.id === targetId
      ? { ...user, name: '홍길동' }
      : user
  )
)

5. 불변성 핵심

users.push(newUser)

users[0].name = '홍길동'

const nextUsers = [
  ...users,
  newUser
]

const nextUser = {
  ...user,
  name: '홍길동'
}

배열 추가

setUsers(prev => [
  ...prev,
  newUser
])

배열 여러 항목 삭제

setUsers(prev =>
  prev.filter(user =>
    !deleteIds.includes(user.id)
  )
)

boolean 토글

setUsers(prev =>
  prev.map(user =>
    user.id === targetId
      ? {
          ...user,
          active: !user.active
        }
      : user
  )
)

6. 구조분해 + Spread/Rest 필수

const {
  name,
  age
} = user

function User({
  name,
  age
}) {
  ...
}

const [
  value,
  setValue
] = useState('')

props 나머지 전달

function Button({
  children,
  className,
  ...props
}) {
  return (
    <button
      className={className}
      {...props}
    >
      {children}
    </button>
  )
}

동적 property 변경

setForm(prev => ({
  ...prev,
  [name]: value
}))

7. 조건식과 안전한 값 접근 필수

8. 고차 함수 중요

함수를 인자로 받거나 함수를 반환하는 함수입니다.

function createHandler(id) {
  return () => {
    deleteUser(id)
  }
}

<button onClick={createHandler(user.id)}>
  삭제
</button>

map, filter, find, reduce도 콜백 함수를 인자로 받으므로 대표적인 고차 함수입니다.

9. 클로저 중요

function createHandler(id) {
  return () => {
    console.log(id)
  }
}

바깥 함수가 끝난 뒤에도 내부 함수가 id를 기억할 수 있는 패턴입니다. 이벤트 핸들러, debounce, throttle, Hook 내부 함수 등에서 자주 만납니다.

10. 순수 함수 중요

function double(value) {
  return value * 2
}

function getTotal(items) {
  return items.reduce(
    (sum, item) => sum + item.price,
    0
  )
}

• 같은 입력이면 같은 출력
• 외부 변수나 원본 데이터를 함부로 변경하지 않음
• 계산/검증/포맷 로직을 컴포넌트 바깥 함수로 분리하기 좋음

11. 파생값 Derived Value React 핵심

const selectedUser =
  users.find(
    user => user.id === selectedId
  )

const activeUsers =
  users.filter(user => user.active)

const total =
  items.reduce(
    (sum, item) => sum + item.price,
    0
  )

12. 함수형 State 업데이트 최우선

setCount(prev => prev + 1)

setOpen(prev => !prev)

setUsers(prev => [
  ...prev,
  newUser
])

setUsers(prev =>
  prev.filter(user =>
    user.id !== targetId
  )
)

prev는 현재 state를 기준으로 다음 state를 계산할 때 사용하는 대표적인 함수형 업데이트 패턴입니다.

13. Form에서의 함수형 패턴

const [form, setForm] = useState({
  name: '',
  age: ''
})

function handleChange(event) {
  const { name, value } = event.target

  setForm(prev => ({
    ...prev,
    [name]: value
  }))
}

• 하나의 객체 state로 폼 관리
• 동적 property 업데이트
• validation 함수 분리
• trim / 숫자 변환 / submit 데이터 가공
• error 객체 생성 및 파생값 처리

14. Hooks와 함수형 사고

Reducer 예제

function reducer(state, action) {
  switch (action.type) {
    case 'delete':
      return state.filter(
        user => user.id !== action.id
      )

    default:
      return state
  }
}

15. 함수 참조 vs 실행 React 필수

onClick={handleClick}

onClick={() =>
  handleClick(id)
}

16. 데이터 → UI 변환 패턴

const visibleUsers =
  users
    .filter(user => user.active)
    .map(user => (
      <User
        key={user.id}
        user={user}
      />
    ))

이처럼 “어떻게 DOM을 하나씩 조작할지”보다 “이 데이터라면 어떤 UI가 나와야 하는지”를 선언하는 방식이 React와 잘 맞습니다.

17. 함수 합성과 로직 분리 중요

const activeUsers =
  getActiveUsers(users)

const sortedUsers =
  sortUsers(activeUsers)

const visibleUsers =
  formatUsers(sortedUsers)

• validation 함수
• formatting 함수
• filtering 함수
• sorting 함수
• API → UI 데이터 변환 함수
• 이벤트 처리 함수 분리

18. 객체·배열 변환 도구

19. 조금 더 깊은 함수형 프로그래밍 개념 나중에

• 일급 함수 First-class Function
• 고차 함수 Higher-order Function
• 순수 함수 Pure Function
• 불변성 Immutability
• 참조 투명성 Referential Transparency
• 함수 합성 Function Composition
• 커링 Currying
• 부분 적용 Partial Application
• 선언형 프로그래밍
• 명령형 vs 선언형
• 부수 효과 Side Effect
• Side Effect 격리
• 재귀 Recursion
• Memoization
• Lazy Evaluation
• Predicate 함수
• Reducer 패턴
• Pipeline 패턴

20. React 학습 우선순위

21. React에서 가장 많이 쓰는 6대 실전 패턴

1) 조회

const user =
  users.find(user =>
    user.id === id
  )

2) 필터 / 삭제

const activeUsers =
  users.filter(user =>
    user.active
  )

3) 변환 / 수정

const newUsers =
  users.map(user =>
    user.id === id
      ? {
          ...user,
          active: !user.active
        }
      : user
  )

4) 추가

const newUsers = [
  ...users,
  newUser
]

5) 집계

const total =
  items.reduce(
    (sum, item) =>
      sum + item.price,
    0
  )

6) React state 업데이트

setUsers(prev =>
  prev.map(user =>
    user.id === id
      ? {
          ...user,
          active: !user.active
        }
      : user
  )
)