📜 02-functionbase 클래스 컴포넌트 - 함수형 컴포넌트와 같이 사용

• 💻 Functionbase.tsx

📜 03-lifecycle 클래스 컴포넌트 - 컴포넌트의 라이프 사이클

• 💻 ClassBase.tsx

• Class Component
  • constructor을 통한 state의 정의,
  • setState() 함수를 통해 state 업데이트,
  • Lifecycle Methods 제공,
• Function Component
  • Lifecycle에 따른 기능 구현X,
  • Hooks 의 사용

📜 01useState-상태관리

• 리액트 훅 개념

  • 리액트 훅이란 컴포넌트가 렌더링되는 동안에만 사용할 수 있는 특별한 함수

    • 컴포넌트 안에서만 사용할 수 있고, 컴포넌트 밖에서는 사용할 수 없다.
    • 클래스 컴포넌트에서만 가능했던 상태 관리와 생명 주기 이벤트를 함수형 컴포넌트에서도 사용할 수 있게 되었다.
    • 함수형 컴포넌트가 클래스 컴포넌트보다 코드가 간결하고 유지보수가 용이하여 활용도가 높아졌고, 일반화되었다.

  • useState

    const [state, setState] = useState(initialState);

  • useEffect

    useEffect(setup, dependencies?);

    • 컴포넌트 생명주기 이벤트를 등록하기 위한 훅
    • 클래스 기반 컴포넌트에서는 아래 메소드를 오버라이드해서 구현
      • componentDidMount() : 컴포넌트가 마운트 완료되고 브라우저 DOM 트리에 반영된 후 호출
      • componentDidUpdate() : 브라우저 DOM 업데이트 완료 후 호출
      • componentWillUnmount() : 컴포넌트가 삭제되기 직전에 호출
      • ...
    • useEffect 을 사용하면 세 가지 코드의 시점에 맞는 작업을 수행한다.
      • 컴포넌트의 렌더링 작업 외 부가적인 작업

        • 타이머 설정

          function ... {
          	...
          
          	setTimeout(() => {
          		hello = '200';
          		console.log(hello);
          	}, 1000)
          	
          	...
          	
          	return (
          		...
          		<h1>{hellol}</h1>
          		...
          	);
          }

          • 비동기함수 setTimeout 의 변경값은 렌더링되지 않는다.
          • useEffect 훅을 받아서 이를 수행할 수 있다.

        • 로깅

      • 컴포넌트의 렌더링 이후 처리할 작업
        • DOM 수동 조작
      • side effect가 발생하는 작업 (컴포넌트를 순수 함수로 유지)
        • 데이터 fetching
• 💻 App.tsx

📜 02 useEffect - side effect 관리(미완성)

• useEffect

  • 컴포넌트 생명주기 이벤트를 등록하기 위한 훅
  • 클래스 기반 컴포넌트에서는 아래 메소드를 오버라이드해서 구현
    • componentDidMount(): 컴포넌트가 마운트 완료되고 브라우저 DOM 트리에 반영된 후 호출
    • componentDidUpdate(): 브라우저 DOM 업데이트 완료 후 호출
    • componentWillUnmount(): 컴포넌트가 삭제되기 직전에 호출
    • ...
  • useEffect에서 주로 구현하는 기능
    • 컴포넌트의 렌더링 작업 외의 부가적인 작업
      • 타이머 설정
      • 로깅
    • 컴포넌트의 렌더링 이후에 처리할 작업
      • DOM 수동 조작
    • side effect가 발생하는 작업(컴포넌트를 순수 함수로 유지)
      • 데이터 fetching

  API

  useEffect(setup, dependencies?);
  

  매개변수

  • setup: 컴포넌트가 마운트(1-4), 업데이트(2-5), 제거(3-1) 될 때 호출되는 함수
    • setup이 함수를 리턴하면, 리턴한 함수를 cleanup이라고 부르며, 컴포넌트가 업데이트되거나 언마운트 될 때 호출됨 (cleanup이 먼저 실행되고 setup이 뒤에 실행됨)
  • dependencies (선택): 의존 객체 배열
    • 컴포넌트가 업데이트될 때 setup 함수를 호출할지 말지 여부를 결정하는데 사용
    • 컴포넌트가 마운트될 때는 dependencies 여부와 상관없이 setup이 호출됨
    • dependencies를 생략하면, 컴포넌트가 업데이트될 때 항상 setup이 호출됨
    • dependencies에 빈 배열을 지정하면 업데이트에서는 호출되지 않음
    • dependencies를 지정하면, 해당 값들이 변경될 때만 setup 함수가 호출됨

• 💻 counter.tsx