패스트캠퍼스 챌린지 48일차 (함수형 컴포넌트의 한계)

22.3.12 (토) +48days

 

함수형 컴포넌트의 구조

컴포넌트는 결국 React Element 를 만드는 여러 방법 중 하나

function SimplifiedGreetring(props) {
  const showName = () => alert(props.name);
  const handleShowName = () => setTimeout(showName, 3000);

  **console.log(this); // undefined - 인스턴스를 생성하지 않는다.**

  return (
    <>
      <h1>Hello, {props.name}</h1>
      <button onClick={handleShowName}>show name</button>
    </>
  );
}

export default SimplifiedGreetring;

함수형 컴포넌트는 상태를 가질 수 없었다.

Hooks, Closure

매번 실행될 뿐인 함수가 상태를 가지려면...

function App() {
  const [name, setName] = useState("students!");

  return (
    <>
      <Greetring name={name} setName={setName} />
      <SimplifiedGreetring name={name} />
    </>
  );
}

“Students!” 는 어디에 저장될까?

함수 실행이 끝났지만 함수 내부에서 만들어 낸 값이 “어딘가에서" 유지된다면.. ⇒ 클로저?

 

In Functional Component... And in Class Component...

useState

useEffect

useCallback

useMemo

useRef

useContext...

 

 

 

---

 

 

 

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다