자바스크립트 + 리액트 디자인 패턴

299

Chapter 12_

리액트 디자인 패턴

이제

Input

클래스 컴포넌트를 상태를 가진 함수형 컴포넌트로 리팩터링해 봅시다.

function Input() {

const [input, setInput] = React.useState("");

return <input onChange={(e) => setInput(e.target.value)} value={input} />;

}

클래스 컴포넌트 예시처럼, 입력 필드의 값은 현재

input

상태 값과 같습니다. 사용자가 입

력 필드에 값을 입력하면,

setInput

메서드를 사용하여

input

상태 값이 업데이트됩니다.

import React, { useState } from "react";

export default function Input() {

const [input, setInput] = useState("");

return (

<input

onChange={(e) => setInput(e.target.value)}

value={input}

placeholder="Type something..."

/>

);

}

12.5.1

이펙트

Hook

앞서 함수형 컴포넌트 내에서

useState

Hook

을 사용하여 상태를 관리하는 방법을 살펴봤

습니다. 그러나 클래스 컴포넌트의 또 다른 장점은 라이프사이클 메서드를 ...