componentDidMount후크를 통해 React 기능 구성 요소에서 시뮬레이션하는 방법이 있습니까?
답변:
안정적인 버전의 후크 (React 버전 16.8.0+)
에 대한 componentDidMount
useEffect(() => {
// Your code here
}, []);
에 대한 componentDidUpdate
useEffect(() => {
// Your code here
}, [yourDependency]);
에 대한 componentWillUnmount
useEffect(() => {
// componentWillUnmount
return () => {
// Your code here
}
}, [yourDependency]);
따라서이 상황에서는 종속성을이 배열로 전달해야합니다. 이와 같은 상태가 있다고 가정 해 봅시다.
const [count, setCount] = useState(0);
그리고 개수가 증가 할 때마다 함수 구성 요소를 다시 렌더링하려고합니다. 그럼 너는 useEffect이렇게 보일 거야
useEffect(() => {
// <div>{count}</div>
}, [count]);
이렇게하면 개수가 업데이트 될 때마다 구성 요소가 다시 렌더링됩니다. 바라건대 이것은 조금 도움이 될 것입니다.
useState. 이 글을 읽는 사람에게는 두 번째 인수를 남겨두면 undefined모든 렌더링에서 효과가 트리거 된다는 점을 명심 하십시오 (내가 잘못 이해하지 않았다면).
수락 된 답변이 작동하지만 권장하지 않습니다. 둘 이상의 상태가 있고 useEffect와 함께 사용하는 경우 종속성 배열에 추가하거나 전혀 사용하지 않는 것에 대한 경고가 표시됩니다.
때로는 예측할 수없는 출력을 제공 할 수있는 문제가 발생합니다. 따라서 함수를 클래스로 다시 작성하는 데 약간의 노력을 기울이는 것이 좋습니다. 변경 사항이 거의 없으며 일부 구성 요소는 클래스로, 일부는 기능으로 가질 수 있습니다. 하나의 규칙 만 사용할 의무는 없습니다.
예를 들어 이것을
function App() {
const [appointments, setAppointments] = useState([]);
const [aptId, setAptId] = useState(1);
useEffect(() => {
fetch('./data.json')
.then(response => response.json())
.then(result => {
const apts = result.map(item => {
item.aptId = aptId;
console.log(aptId);
setAptId(aptId + 1);
return item;
})
setAppointments(apts);
});
}, []);
return(...);
}
과
class App extends Component {
constructor() {
super();
this.state = {
appointments: [],
aptId: 1,
}
}
componentDidMount() {
fetch('./data.json')
.then(response => response.json())
.then(result => {
const apts = result.map(item => {
item.aptId = this.state.aptId;
this.setState({aptId: this.state.aptId + 1});
console.log(this.state.aptId);
return item;
});
this.setState({appointments: apts});
});
}
render(...);
}
이것은 단지 예 입니다. 따라서 코드의 모범 사례 나 잠재적 인 문제에 대해 이야기하지 마십시오. 이 두 가지 모두 동일한 논리를 가지고 있지만 나중에는 예상 대로만 작동합니다. 이번에는 useEffect가 실행되는 componentDidMount 기능을 사용할 수 있지만 앱이 성장함에 따라 몇 가지 문제에 직면 할 수 있습니다. 따라서 해당 단계에서 다시 작성하는 것보다 초기 단계에서 수행하는 것이 좋습니다.
게다가 OOP는 그다지 나쁘지 않습니다. 프로 시저 지향 프로그래밍으로 충분했다면 객체 지향 프로그래밍은 없었을 것입니다. 때로는 고통 스럽지만 더 좋습니다 (기술적으로는 개인적인 문제는 제쳐두고).
아무 없다 componentDidMount기능적 구성 요소에 있지만, 후크 당신이 사용하여 동작을 에뮬레이트 할 수있는 방법 제공 반작용 useEffect훅을.
useEffect()마운트시에만 콜백을 실행 하려면 빈 배열을에 두 번째 인수로 전달합니다.
에 대한 설명서를useEffect 읽어보십시오 .
function ComponentDidMount() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log('componentDidMount');
}, []);
return (
<div>
<p>componentDidMount: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
ReactDOM.render(
<div>
<ComponentDidMount />
</div>,
document.querySelector("#app")
);<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>componentDidMountin react hooks 와 정확히 일치하는 것은 없습니다 .
내 경험상 반응 후크는 개발할 때 다른 사고 방식이 필요하며 일반적으로 .NET과 같은 클래스 메서드와 비교해서는 안됩니다 componentDidMount.
즉, 후크를 사용하여와 유사한 효과 를 생성 할 수있는 방법이 있습니다componentDidMount .
해결책 1 :
useEffect(() => {
console.log("I have been mounted")
}, [])
해결책 2 :
const num = 5
useEffect(() => {
console.log("I will only run if my deps change: ", num)
}, [num])
솔루션 3 (기능 포함) :
useEffect(() => {
const someFunc = () => {
console.log("Function being run after/on mount")
}
someFunc()
}, [])
해결 방법 4 (useCallback) :
const msg = "some message"
const myFunc = useCallback(() => {
console.log(msg)
}, [msg])
useEffect(() => {
myFunc()
}, [myFunc])
해결 방법 5 (창의력 확보) :
export default function useDidMountHook(callback) {
const didMount = useRef(null)
useEffect(() => {
if (callback && !didMount.current) {
didMount.current = true
callback()
}
})
}
솔루션 5는 다른 솔루션이 귀하의 사용 사례에 적합하지 않은 경우에만 실제로 사용해야한다는 점에 주목할 가치가 있습니다 . 솔루션 5가 필요하다고 판단되면 미리 만들어진이 후크 use-did-mount를 사용하는 것이 좋습니다 .
소스 (자세한 내용 포함) : 반응 후크에서 componentDidMount 사용
useEffect()함수를 사용하는 방법에 따라 componentDidMount ()처럼 작동 할 수있는 을 사용하려고합니다 .
예 : loaded처음에 false로 설정된 사용자 정의 상태 속성을 사용하고 렌더링시 true로 전환하고이 값이 변경 될 때만 효과를 발생시킬 수 있습니다.