한국어 (ko) 번역

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 ReactJS의 정적 타입 검사 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 중요한 개념을 단계별로 안내해 드리겠습니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 기본에서 시작해 점진적으로 올라갑니다!

ReactJS - Static Type Checking

정적 타입 검사는 무엇인가요?

ReactJS의 구체적인 내용에 들어가기 전에, 정적 타입 검사가 무엇인지 이해해 보겠습니다. 케이크를 만들 때를 상상해 보세요. 소금 대신 설탕을 사용하지 않을 것 같죠? 그건因为你 알고 있는 재료의 타입을 사용해야 하기 때문입니다. 정적 타입 검사도 비슷합니다 - 우리 코드에서 올바른 데이터 타입을 사용하는 데 도움을 줍니다.

프로그래밍에서 정적 타입 검사는 변수, 함수 매개변수, 그리고 반환 값의 타입을 코드가 실행되기 전에 검증하는 과정입니다. 마치 케이크를 만들기 전에 레시피를 두 번 확인해 주는 유용한 친구처럼입니다!

React에서 정적 타입 검사를 사용하는 이유는 무엇인가요?

이제 여러분은 "왜 React에서 이를 필요로 하는가?"라고 궁금해할 수도 있습니다. 그럼 작은 이야기를 들려드리겠습니다. 오래 전, 멀리 떨어진 나라에서 (사실은 제 전 직장에서), 우리는 큰 React 프로젝트를 가지고 있었습니다. 모든 것이 잘 보이고 있었지만, 생산 환경에서 이상한 오류가 발생하기 시작했습니다. 결국 우리는 잘못된 타입의 데이터를 일부 컴포넌트에 전달한 것이었죠. 정적 타입 검사를 사용했더라면 이 문제를 일찍 발견할 수 있었을 것입니다!

React에서 정적 타입 검사는 다음과 같은 도움을 줍니다:

개발 초기에 오류를 찾을 수 있습니다.
코드 품질과 가독성을 향상시킵니다.
더 나은 문서화를 제공합니다.
더 나은 자동 완성을 통해 개발 경험을 향상시킵니다.

Flow 소개

이제 정적 타입 검사가 중요한 이유를 알았으니, 우리의 새로운 친구를 소개하겠습니다: Flow. Flow는 Facebook(React를 제공해 준 사람들)이 만든 JavaScript의 정적 타입 체커입니다. 코드의 타입 관련 문제를 문제가 되기 전에 잡아주는 슈퍼 히어로입니다!

React 프로젝트에 Flow 설정하기

이제 Flow를 React 프로젝트에 설정해 보겠습니다. 걱정하지 마세요, 단계별로 안내해 드리겠습니다!

먼저 새로운 React 프로젝트를 만들어 보겠습니다:

npx create-react-app my-flow-app
cd my-flow-app

Flow를 설치합니다:

npm install --save-dev flow-bin

package.json에 Flow 스크립트를 추가합니다:

{
  "scripts": {
    "flow": "flow"
  }
}

Flow를 초기화합니다:

npm run flow init

이렇게 하면 프로젝트 루트에 .flowconfig 파일이 생성됩니다.

Flow를 검사하고 싶은 파일 상단에 // @flow을 추가합니다.

React 컴포넌트에서 Flow 사용하기

이제 Flow를 설정했으니, React 컴포넌트에서 어떻게 사용할 수 있는지 보겠습니다. 간단한 예제로 시작해 보겠습니다:

// @flow
import React from 'react';

type Props = {
  name: string,
  age: number
};

function Greeting({ name, age }: Props) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

export default Greeting;

이를 분해해 보겠습니다:

// @flow 상단에 있어 Flow가 이 파일을 검사하도록 합니다.
Props 타입을 정의하고 name은 문자열, age는 숫자로 지정합니다.
함수 매개변수에서 : Props를 사용하여 이 함수가 Props 타입의 프로퍼티를 기대한다고 알립니다.

이제 잘못된 사용을 시도해 보면 Flow가 경고를 줄 것입니다:

// 이렇게 하면 Flow 오류가 발생합니다
<Greeting name={42} age="twenty" />

Flow는 우리에게 다음과 같이 알려줄 것입니다: name에 문자열을 전달해야 하지만 숫자를 전달했고, age에 숫자를 전달해야 하지만 문자열을 전달했습니다.

Flow와 React 상태

Flow는 React의 상태에도 도움이 됩니다. 예제를 보겠습니다:

// @flow
import React, { useState } from 'react';

type State = {
  count: number
};

function Counter() {
  const [state, setState] = useState<State>({ count: 0 });

  const increment = () => {
    setState(prevState => ({ count: prevState.count + 1 }));
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

이 예제에서:

State 타입을 정의하고 count 프로퍼티는 숫자 타입으로 지정합니다.
useState<State>를 사용하여 Flow에게 상태가 State 타입임을 알립니다.

Flow와 React 프로퍼티

여러 가지 프로퍼티를 가진 더 복잡한 예제를 보겠습니다:

// @flow
import React from 'react';

type Props = {
  items: Array<string>,
  onItemClick: (item: string) => void
};

function ItemList({ items, onItemClick }: Props) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} onClick={() => onItemClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

export default ItemList;

이렇게 되고 있습니다:

Props 타입을 정의하고 items는 문자열 배열, onItemClick은 문자열을 받고 아무 것도 반환하지 않는 함수로 지정합니다.
Flow는 이 컴포넌트를 사용할 때 올바른 타입의 프로퍼티가 전달되었는지 확인합니다.

Flow 메서드 표

React에서 자주 사용할 Flow 메서드 표를 제공합니다:

메서드	설명	예제
`type`	새로운 타입 정의	`type Props = { name: string };`
`interface`	새로운 인터페이스 정의	`interface User { name: string, age: number }`
`$ReadOnly<T>`	T의 모든 프로퍼티를 읽기 전용으로 만들기	`type Props = $ReadOnly<{ name: string }>;`
`$Shape<T>`	T의 모든 프로퍼티를 선택 사항으로 만들기	`type PartialUser = $Shape<User>;`
`$ElementType<T, K>`	배열이나 객체의 요소 타입을 가져오기	`type Name = $ElementType<User, 'name'>;`
`$Keys<T>`	T의 모든 키를 가져오는 연합 타입	`type UserKeys = $Keys<User>;`
`$Values<T>`	T의 모든 값을 가져오는 연합 타입	`type UserValues = $Values<User>;`

결론

이렇게 해서 우리는 React에서 Flow를 사용한 정적 타입 검사의 첫 걸음을 내딛었습니다. 새로운 기술을 배울 때처럼,처음에는 조금 어려울 수 있지만, 연습을 통해 Flow는 React 개발 도구에서 소중한 도구가 될 것입니다.

정적 타입 검사는 지금은 추가적인 작업처럼 보일 수 있지만, 미래의 당신은 이제 타입 오류를 사전에 잡아낸 것에 감사할 것입니다!

계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 코드를 작성하세요! Flow와 함께하는 React는 슈퍼 히어로처럼 느껴질 것입니다 - 지혜롭게 사용하면 코드가 더 강하고, 안전하고, 이해하기 쉬워집니다. 다음 번에 다시 만날 때까지, 행복하게 코딩하세요!

Credits: Image by storyset