React로 생각하기: 2020 버전

2020년이고 원본Thinking in React 기사에는 여전히 클래스 구성 요소가 있으므로 업데이트된 버전을 수행해야 할 때라고 생각합니다.

조롱 시작

우리는 큰 프로젝트에서 디자이너/디자인 팀이 제공하거나 작은 개인 프로젝트인 경우 스스로 만든 모형으로 항상 시작해야 합니다. 따라서 클래식 로그인 환경을 원한다고 가정해 보겠습니다.

모의를 구성 요소로 나누기

이제 모형이 있으므로 모형을 살펴보고 부품을 식별해야 합니다.



식별되면 모든 "구성 요소"에 대해 명확한 이름을 사용해야 합니다(React 규칙에 따른 PascalCase).

LoginForm (빨간색): 전체 로그인 양식입니다.

SubmitButton (녹색): "양식"을 제출하는 버튼입니다.

Label (분홍색): 양식 레이블입니다.

Input (주황색): 입력 양식입니다.

PasswordInput (하늘색): 비밀번호를 입력하는 형식입니다.

구성 요소 빌드

이제 구성 요소를 식별했으므로 구성해 보겠습니다!

const Label = props => <label {...props} />;

const Input = props => <input {...props} />;

const PasswordInput = props => <Input type="password" {...props} />;

const SubmitButton = props => <button type="submit" {...props} />;

const LoginForm = props => <form {...props} />;

Input 내에서 PasswordInput 를 재사용할 수도 있습니다.

구성 요소 사용

이제 이러한 구성 요소가 있으므로 이를 사용하여 모형에 생명을 불어넣을 수 있습니다. 이 래핑 구성 요소LoginContainer를 호출해 보겠습니다.

const LoginContainer = () => (
    <LoginForm>
        <Label>
            Username
            <Input name="username" />
        </Label>
        <Label>
            Password
            <PasswordInput name="password" />
        </Label>
        <SubmitButton>Login</SubmitButton>
    </LoginForm>
);

이를 위해서는 API 상호 작용 및 이벤트 처리가 필요하지만 먼저...

초기 최적화

구성 요소에서 작업하는 동안 Input 또는 PasswordInput 구성 요소를 사용할 때마다 최적화를 감지할 수 있으므로 Label로 래핑하므로 DRY을 유지하려면 curried을 만들어 봅시다. 래핑할 함수Label:

const labeled =
    Input =>
    ({ children, labelProps, name, ...props }) =>
        (
            <Label {...labelProps}>
                {children}
                <Input {...{ name, ...props }} />
            </Label>
        );

이제 이를 사용하여 두 개의 새 구성 요소를 만들 수 있습니다.

const FormInput = labeled(Input);
const FormPasswordInput = labeled(PasswordInput);

이제 LoginContainer는 다음과 같습니다.

const LoginContainer = () => (
    <LoginForm>
        <FormInput name="username">Username</FormInput>
        <FormPasswordInput name="password">Password</FormPasswordInput>
        <SubmitButton>Login</SubmitButton>
    </LoginForm>
);

상태 추가

일반적으로 상태는 마지막으로 남겨두고 소품과 이벤트를 사용하여 모든 것을 가능한 한 상태 비저장으로 생각하고 설계해야 합니다. 구성 요소를 유지 관리, 테스트 및 전반적으로 이해하기 쉽게 만듭니다.

상태가 필요한 경우 상태 컨테이너( Redux , MobX , unistore 등) 또는 컨테이너/래퍼 구성 요소에서 처리해야 합니다. 매우 간단한 로그인 예제에서 상태의 위치는 LoginContainer 자체가 될 수 있습니다. 이를 위해 React hooks을 사용하겠습니다.

const LoginContainer = () => {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const login = useCallback(
        event => {
            event.preventDefault();

            fetch("/api", {
                method: "POST",
                body: JSON.stringify({ username, password }),
            })
                .then(response => response.json())
                .then(response => {
                    // Handle the response somehow
                })
                .catch(console.error);
        },
        [username, password],
    );

    return (
        <LoginForm onSubmit={login}>
            <FormInput
                name="username"
                onChange={({ currentTarget }) =>
                    setUsername(currentTarget.value)
                }
                value={username}
            >
                Username
            </FormInput>
            <FormPasswordInput
                name="password"
                onChange={({ currentTarget }) =>
                    setPassword(currentTarget.value)
                }
                value={password}
            >
                Password
            </FormPasswordInput>
            <SubmitButton>Login</SubmitButton>
        </LoginForm>
    );
};

상태를 피하는 접근 방식은 기능적 프로그래밍 원칙과 관련이 있지만 기본적으로 구성 요소를 가능한 한 pure 유지하는 것입니다.

TL;DR

조롱.

구성 요소를 식별합니다.

빌드합니다.

사용하고 필요할 때 최적화하십시오.

가능한 한 무국적 상태를 유지하십시오. 필요한 경우에만 상태를 추가하십시오.

그게 다야! 읽어 주셔서 감사합니다!