[React] Class to Functional 리팩토링

[DrMaemi]

가이드 (변경 순서)

• How to convert a React Class Component to a Function Component, nimblewebdeveloper.com

1. class 를 function으로 수정
   • class state, componentDid... 훅들 수정
   • constructor 제거
2. render() 메서드를 return JSX 문으로 수정
3. 모든 메서드를 function 형식으로 수정
   • state 훅 수정

Lifecycle

Class

```tsx componentDidMount() { console.log("Component did mount"); } componentDidUpdate() { console.log("Component did update"); } componentWillUnmount() { console.log("Component will unmount"); } ```

Functional

```tsx // componentDidMount() useEffect(() => { console.log('마운트 될 때'); }, []); // componentDidUpdate() useEffect(() => { console.log('state 값이 변할 때') }, [state]); useEffect(() => { console.log('렌더링 될 때'); }); // componentWillUnmount useEffect(() => { return () => { console.log('컴포넌트 제거될 때'); }; }, []); ``` ```tsx useEffect(() => { // 컴포넌트가 마운트될 때 실행되는 로직 fetchData(); connectSseEventSource(); // 컴포넌트가 언마운트될 때 실행되는 로직 return () => { evtSrc?.close(); }; }, []); ```

상세 case

• Map<string, string> 타입 key 배열을 얻어올 때 기존 클래스 컴포넌트에선 map.keys()로 접근 가능했는데, 함수형 컴포넌트로 변경하면서 Object.keys(map) 으로 수정해야 오류가 발생하지 않았다.

A. 참조

• [React] Class / Functional Component, velog.io
• How to convert a React Class Component to a Function Component, nimblewebdeveloper.com