React 상태 끌어올리기를 useState로 어떻게 구현할 수 있나요?

Question

React에서 useState를 이용하여 변수를 관리하는데 일반적인 상태 끌어올리기는 공홈에도 설명이 잘 되어 있으나 useState를 이용한 상태 끌어올리기는 찾으려고해도 자료가 많지 않네요.

가장 기본의 예제를 작성해 주시면 참고하겠습니다.

또한 위 내용과 관련한 간단한 팁들도 주시면 감사하겠습니다.

프알못 · Accepted Answer

The water would boil.

; } return

The water would not boil.

; } class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.props.onTemperatureChange(e.target.value); } render() { const temperature = this.props.temperature; const scale = this.props.scale; return (

Enter temperature in {scaleNames[scale]}:

); } } class Calculator extends React.Component { constructor(props) { super(props); this.handleCelsiusChange = this.handleCelsiusChange.bind(this); this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this); this.state = {temperature: '', scale: 'c'}; } handleCelsiusChange(temperature) { this.setState({scale: 'c', temperature}); } handleFahrenheitChange(temperature) { this.setState({scale: 'f', temperature}); } render() { const scale = this.state.scale; const temperature = this.state.temperature; const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature; const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature; return (

); } }이게 setState를 사용하는 예시인데요,const scaleNames = { c: "Celsius", f: "Fahrenheit" }; function toCelsius(fahrenheit) { return ((fahrenheit - 32) * 5) / 9; } function toFahrenheit(celsius) { return (celsius * 9) / 5 + 32; } function tryConvert(temperature, convert) { const input = parseFloat(temperature); if (Number.isNaN(input)) { return ""; } const output = convert(input); const rounded = Math.round(output * 1000) / 1000; return rounded.toString(); } function BoilingVerdict(props) { if (props.celsius >= 100) { return

The water would boil.

; } return

The water would not boil.

; } function TemperatureInput({ onTemperatureChange, temperature, scale }) { const handleChange = useCallback( e => { onTemperatureChange(e.target.value); }, [onTemperatureChange] ); return (

Enter temperature in {scaleNames[scale]}:

); } function Calculator() { const [{ temperature, scale }, setState] = useState({ temperature: "", scale: "" }); const handleCelsiusChange = useCallback(temperature => { setState({ scale: "c", temperature }); }, []); const handleFahrenheitChange = useCallback(temperature => { setState({ scale: "f", temperature }); }, []); const celsius = scale === "f" ? tryConvert(temperature, toCelsius) : temperature; const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature; return (

); }특별한 건 없고, 단순히 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸면 됩니다.실제로 동작하는 것을 볼 수 있는 예시입니다.

생활꿀팁

생활꿀팁

React 상태 끌어올리기를 useState로 어떻게 구현할 수 있나요?