나의 React 여정은 4년 전 기능적 구성요소와 Hooks로 시작되었습니다. 그런 다음 부트 캠프의 동료 참가자이자 레지던트 클래스 구성 요소 애호가인 'Siswe'가 왔습니다. 우리가 기능적 구성요소로 팀 프로젝트를 진행하는 동안 '시스위'는 변함없는 충성심으로 클래스 구성요소를 고수했습니다.
레고 벽돌이라고 생각하세요. 다양한 방법으로 결합하여 복잡한 구조를 만들 수 있습니다. UI와 로직을 캡슐화하는 독립적이고 재사용 가능한 코드 조각입니다.
다른 구성 요소 내에서 구성 요소를 재사용하는 것은 일반적으로 다음과 같습니다.
import MyComponent from './MyComponent'; function ParentComponent() { return ( <div> <MyComponent /> </div> ); }
클래스 구성요소와 기능 구성요소는 React에서 구성요소를 생성하는 두 가지 주요 방법입니다.
import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={this.handleClick}>Click me</button> </div> ); } } export default Counter;
React.Component 클래스를 확장한 JavaScript 클래스를 사용하여 생성된 클래스 컴포넌트입니다.
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <p>You clicked {count} times</p> <button onClick={handleClick}>Click me</button> </div> ); } export default Counter;
반면 이는 간단한 JavaScript 함수로 작성된 기능적 구성요소입니다.
클래스 구성요소는 this.state를 사용하여 자체 내부 상태를 관리합니다. 이는 일반적으로 생성자에서 초기화되고, this.state 객체를 사용하여 액세스되며, 위의 코드 블록에서 볼 수 있듯이 this.setState 메소드를 사용하여 업데이트됩니다.
기능적 구성 요소는 처음에는 상태 비저장이었습니다. 그러나 Hooks의 도입으로 그들은 상태 및 수명주기 논리를 관리하는 능력을 얻었습니다. 상태 관리를 위해 useState 후크를 활용하면 위에서 볼 수 있듯이 현재 상태와 이를 업데이트하는 함수라는 한 쌍의 값을 반환합니다. 이는 간단한 상태 관리에 충분합니다. 여러 하위 값을 포함하는 더 복잡한 상태 논리의 경우 또는 다음 상태가 이전 상태에 따라 달라지는 경우 useReducer를 사용하는 것이 좋습니다.
예:
import React, { useReducer } from 'react'; const initialState = { count: 0, step: 1, }; const reducer = (state, action) => { switch (action.type) { case 'increment': return { ...state, count: state.count + state.step }; case 'decrement': return { ...state, count: state.count - state.step }; case 'setStep': return { ...state, step: action.payload }; default: throw new Error(); } }; function Counter() { const [state, dispatch] = useReducer(reducer, initialState); const increment = () => dispatch({ type: 'increment' }); const decrement = () => dispatch({ type: 'decrement' }); const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep }); return ( <div> <p>Count: {state.count}</p> <p>Step: {state.step}</p> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <input type="number" value={state.step} onChange={(e) => setStep(Number(e.target.value))} /> </div> ); } export default Counter;
여기서 useReducer는 구조화되고 유지 관리 가능한 방식으로 여러 상태 값과 복잡한 업데이트 논리를 관리합니다. 후크는 기능성 부품 전용입니다.
구성 요소 유형에 관계없이 상태 개체를 직접 수정하거나 변경하지 마세요. 대신 업데이트된 값으로 새 개체를 만듭니다. 이 접근 방식은 React가 변경 사항을 효율적으로 추적하고 다시 렌더링을 최적화하는 데 도움이 됩니다.
기능 구성 요소 예:
import React, { useState } from 'react'; function UserProfile() { const [user, setUser] = useState({ name: 'Jane Doe', age: 30 }); const handleNameChange = (newName) => { setUser({ ...user, name: newName }); // Create a new object with updated name }; return ( <div> <p>Name: {user.name}</p> <p>Age: {user.age}</p> <input type="text" value={user.name} onChange={(e) => handleNameChange(e.target.value)} /> </div> ); } export default UserProfile;
클래스 구성요소 예:
import React, { Component } from 'react'; class UserProfile extends Component { state = { user: { name: 'Jane Doe', age: 30 } }; handleNameChange = (newName) => { this.setState(prevState => ({ user: { ...prevState.user, name: newName } // Create a new object with updated name })); }; render() { return ( <div> <p>Name: {this.state.user.name}</p> <p>Age: {this.state.user.age}</p> <input type="text" value={this.state.user.name} onChange={(e) => this.handleNameChange(e.target.value)} /> </div> ); } } export default UserProfile;
두 예 모두 원본 개체의 무결성을 유지하면서 사용자 개체의 이름 속성을 업데이트합니다. 이렇게 하면 새로운 상태 개체가 생성되어 불변성을 유지하고 상태 업데이트와 관련된 잠재적인 문제를 방지할 수 있습니다. 이를 준수하면 예측 가능한 동작, 성능 최적화 및 보다 쉬운 디버깅이 보장됩니다.
기능적 접근 방식은 일반적으로 더 간결하고 읽기 쉬운 것으로 간주되며 단순성과 효율성으로 인해 충분한 경우가 많습니다. 그러나 클래스 구성 요소는 특히 복잡한 논리 또는 성능 최적화를 처리할 때 상태 관리 및 수명 주기 메서드에 대한 더 많은 제어 기능을 제공합니다. 이는 복잡한 논리를 구성하기 위한 더 나은 구조를 의미합니다.
엄격한 규칙이 없기 때문에 클래스 구성 요소와 기능 구성 요소 사이의 선택이 항상 명확한 것은 아닙니다. 구성 요소의 요구 사항을 평가하고 프로젝트 요구 사항에 가장 잘 맞는 유형을 선택하세요.
어떤 구성 요소를 더 즐겁게 작업하시나요?
위 내용은 React 구성 요소: 클래스와 기능.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!