클래스 구성 요소를 기능 구성 요소로 변환(기본 구조, 상태 및 수명 주기 메서드)

When we create a method in a class component, we have to bind it to this object (unless you create your method as an arrow function) so that we can use it in our component.

class MyComponent extends React.Component {
    constructor() {
        super();
        this.myMethod = this.myMethod.bind(this);
    }
    myMethod() { 
        // do stuff
    }
    render() {
        return // some jsx
    }
}

In a functional component, no binding is necessary because there is no class. You may create your methods inside your component's function definition as you like (function definition, assignment to a variable, etc.)

const MyComponent = () => {
    const myMethod = () => {
        // do stuff
    }
    return // some jsx
}

In a functional component, we no longer need the this keyword. There is no class instance, so we do not refer to our state , props , or methods as a member of the class. Let's continue from the previous example. If we are to refer to the myMethod function in our JSX, we would do it like this:

<button onClick={myMethod}>My Button</button>

In a functional component, we also do not need the render() method anymore. Whatever our functional component returns become our component's JSX.

This is an obvious one because you probably used stateless functional components before, but I did not want to skip it.

In class components, you pass props to the base constructor so that you have access to the props object as this.props .

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    // do stuff
}

In a functional component, props comes as a parameter to the component's function definition.

function MyComponent(props) {
    // do stuff
}

In older versions of React, the state used to be defined in the constructor. Later on, it changed so that you can define a state object right at the beginning of your component.

In older versions:

class MyComponent extends React.Component {
    constructor() {
        this.state = { myState: "my value" }
    }
    // do stuff
}

Newer versions:

class MyComponent extends React.Component {
    state = { myState: "my value" }
    // do stuff
}

In functional components, you need to use the useState hook for creating a new state piece. Also, in the class components, state has to be an object and there can be only one state object in a class component. This is not the case when creating a state with the useState hook.

const MyComponent = () => {
    const [myState, setMyState] = useState('my value');
    const [myNumber, setMyNumber] = useState(22);
    const [myBool, setMyBool] = useState(false);

    // do stuff
}

Here, we created 3 different pieces of state for one component. One is a string, one is an integer, and one is a boolean value.

Let's explain the way we create a state here.

useState hook returns a tuple with two elements: the first one is the value of the state we created, the second one is a function for updating that specific piece of state, which brings me to the next topic.

When we are updating our state in class components, we utilize React's setState function which has a slightly different API compared to the setter method returned from the useState hook.

class MyComponent extends React.Component {
    state = { 
        myState: "my value", 
        myOtherState: "my other value" 
    }

    updateMyState = () => {
        this.setState({ myState: "my newer value" });
    }

    render() {
        // After running this.updateMyState()
        console.log(this.state); // { myState: "my newer value", myOtherState: "my other value"}
        return // some JSX
    }

}

We pass an object to the this.setState method with the keys that we desire to update. this.setState automatically merges the passed state into the existing state. This is not the case when we are dealing with state as objects in functional components.

const MyComponent = () => {
    const [myState, setMyState] = useState({ 
        myState: "my value", 
        myOtherState: "my other value" 
    });

    const updateMyState = () => {
        setMyState({ myState: "my newer value" });
    }

    // After running updateMyState()
    console.log(myState); // { myState: "my newer value" }

    return // some JSX
}

Another difference is that the second argument of setState accepts an optional callback function in class components to run after the state change happens. Even though the React documentation does not recommend using this method and instead recommends using the componentDidUpdate life-cycle method, you might be inclined to think that the setter method returned from useState in functional components would provide the same optional callback feature. But it does not.

This is a fairly easy one. Referring to a piece of state in a class component: this.state.myState .

In a functional component, whatever name you gave your state while de-structuring from the useState hook, that's your state name.

We use this life-cycle method for the side effects of our component, such as calling an API, etc. when the component is initially rendered. Everything inside this method is called once the initial rendering of the component is completed.

class MyComponent extends React.Component {
    // state, etc.

    componentDidMount() {
        this.fetchSomeData();
    }

    // do stuff
}

To do the same thing in a functional component, we make use of our useEffect hook. useEffect takes two parameters: the first one is a function to call, the second one is an optional dependency array.

const MyComponent = () => {
    // state, etc.

    useEffect(() => {
        fetchSomeData();
    }, []);


    // do stuff
}

When imitating componentDidMount , we leave the second dependency array empty. Why? Because React looks at that array and executes the function in useEffect if any value in that array changes. Since we only want to fetch our data once the component is initially rendered, we leave that array empty. An empty array means, "Hey React, watch this empty array. If anything changes, execute the function I gave you."

Here is an important note: whether we leave the dependency array empty, pass values in it, or don't even pass the array itself to useEffect ; either way React executes the function in useEffect in the initial rendering, which brings me to the next life-cycle method.

This life-cycle method is invoked after an update in props or state object occurs. It takes two parameters prevProps and prevState so we can check if the current props or state has changed in the last component update.

class MyComponent extends React.Component {
    // state, props, etc.

    componentDidUpdate(prevProps) {
        if (this.props.id !== prevProps.id) {
            this.fetchData(this.props.id);
        }
    }

    // do stuff

}

Here we are checking if this.props.id has changed or not. If changed, we are fetching new data based on the new id. useEffect saves us some time when checking if the props object has changed or not.

const MyComponent = (props) => {
    // state, etc.

    useEffect(() => {
        fetchData(props.id);
    }, [props.id]);

    // do stuff
}

We made use of the dependency array I was talking about earlier. Now React will watch props.id value and execute the function if it changes. I want to remind again: The function in useEffect will be executed in the initial render as well as following updates on props.id while componentDidUpdate will not be executed in the initial render.

If you remove the dependency array completely, the function in useEffect will run in every update of the component.

This life-cycle method is invoked right before the component is unmounted. If you have ongoing side-effects that you started earlier such as a network request or a timer, this is the place you clean them up.

class MyComponent extends React.Component {
    state = { counter: 0 }

    componentDidMount() {
        this.myTimer = setInterval(() => {
            this.setState({ counter: this.state.counter + 1 })
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.myTimer);
    }

    // do stuff
}

Here we created a timer in our componentDidMount life-cycle method. It updates and increases this.state.counter every second. If we do not clear this up in the componentWillUnmount life-cycle method, we will get Can't perform a React state update on an unmounted component error after the component is unmounted.

To do the same thing in functional components, we make use of the return keyword inside our function in useEffect . Let's create the same thing in a functional component.

const MyComponent = (props) => {
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        const myTimer = setInterval(() => {
            setCounter(counter => counter + 1);
        }, 1000);

        return () => {
            clearInterval(myTimer);
        }

    }, []);

    // do stuff
}

In case you haven't realized already, we did imitate componentDidMount and componentWillUnmount under one useEffect call.