너의 면접을 위해 준비하다

Props are actually what you pass to a component from outside of it. It can only be changed from outside the component.

State are values which is triggered inside the component itself. It is also mutable by the component.

import {useState} from "react";

const StateTutorial = () => {
    const [inputValue, setInputValue] = useState("Name")
    let onChange = (event) => {
        const newValue = event.target.value;
        setInputValue(newValue);
    }

    return(
        <div>
            <input placeholder="Enter your name.." onChange={onChange}/>
            {inputValue}
        </div>
    )
}
export default StateTutorial;

Initial state: It is the value the state is initialised with.
Current state: It holds the value of the state currently in.
Reducer function: The reducer function accepts current state and an action object as parameters. And depending on the action object, the reducer function must update the state and hence returning a new state.
Action object: The object that describes how to update the state. It has a property called type which describes what kind of state update the reducer function must do.
Dispatch function: This function dispatches an action object i.e. whenever you want to update the state you simply call the dispatch function with the appropriate action object.

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1, showText: state.showText };
    case "toggleShowText":
      return { count: state.count, showText: !state.showText };
    default:
      return state;
  }
};

const ReducerTutorial = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0, showText: true });

  return (
    <div>
      <h1>{state.count}</h1>
      <button
        onClick={() => {
          dispatch({ type: "INCREMENT" });
          dispatch({ type: "toggleShowText" });
        }}
      >
        Click Here
      </button>

      {state.showText && <p>This is a text</p>}
    </div>
  );
};

export default ReducerTutorial;

function EffectTutorial() {
  const [data, setData] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/comments")
      .then((response) => {
        setData(response.data[0].email);
        console.log("API WAS CALLED");
      });
  }, []);

  return (
    <div>
      Hello World
      <h1>{data}</h1>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click
      </button>
    </div>
  );
}

I’m sure I don’t have to explain further how useEffect works as its one of the first few hooks a react developer gets to know about.

function LayoutEffectTutorial() {
  const inputRef = useRef(null);

  useLayoutEffect(() => {
    console.log(inputRef.current.value);
  }, []);

  useEffect(() => {
    inputRef.current.value = "HELLO";
  }, []);

  return (
    <div className="App">
      <input ref={inputRef} value="SEKIRO" style={{ width: 400, height: 60 }} />
    </div>
  );
}

Even though there isn’t a noticeable effect when the useEffect hook is replaced by useLayoutEffect, but it is advised to stick with useEffect unless it causes some problems.

reference.current access the reference value and reference.current.value updates it.

function RefTutorial() {
  const inputRef = useRef(null);

  const onClick = () => {
    inputRef.current.value = "";
  };
  return (
    <div>
      <h1>Pedro</h1>
      <input type="text" placeholder="Ex..." ref={inputRef} />
      <button onClick={onClick}>Change Name</button>
    </div>
  );
}

The forwardRef function allows us to transform a functional component and allow it to accept reference form its parent component. Which is how not only we can grab props but we can also grab any references that is passed through the parent.

import React, { forwardRef, useImperativeHandle, useState } from "react";

const Button = forwardRef((props, ref) => {
  const [toggle, setToggle] = useState(false);

  useImperativeHandle(ref, () => ({
    alterToggle() {
      setToggle(!toggle);
    },
  }));
  return (
    <>
      <button>Button From Child</button>
      {toggle && <span>Toggle</span>}
    </>
  );
});

function ImperativeHandle() {
  const buttonRef = useRef(null);
  return (
    <div>
      <button
        onClick={() => {
          buttonRef.current.alterToggle();
        }}
      >
        Button From Parent
      </button>
      <Button ref={buttonRef} />
    </div>
  );
}