220404

클래스형 컴포넌트

클래스형 컴포넌트는 함수형 컴포넌트와 비슷하면서도 다르다. 예전에는 클래스형을 많이 사용했다면 요즘은 함수형을 사용한다. 클래스형 컴포넌트와 함수형 컴포넌트가 한 프로젝트에서 혼용되어 사용할 수도 있지만 클래스형을 함수형으로 바꾸고 있는 추세다.

export default class CounterPage extends Component {
  state = {
    // component 에서 제공해주는 기능
    count: 0,
  };

  onClickCounter = () => {
    console.log(this.state.count);
    this.setState((prev: IState) => ({
      count: prev.count + 1,
    }));
  };

  render() {
    // component 에서 제공해주는 기능
    return (
      <div>
        <div>현재카운트: {this.state.count}</div>
        <button onClick={this.onClickCounter}>카운트 올리기!!!</button>
      </div>
    );
  }
}

this

클래스형 컴포넌트에서 사용되는 this는 클래스 안에 선언해 준 걸 가지고 올 수 있다. this는 class 자체라고 생각해도 된다. 하지만 문제는 this가 매번 똑같은 게 아니라 <누가> 실행을 시켰느냐에 따라 달라진다.

aaa 에서 qqq 에 있는 this 를 실행시키는 건 window 가 아니라 aaa 가 되는데 이걸 동적 scope. 이때 this를 사용하기 위해선 this를 바인딩해주어야 한다.

하지만 화살표 함수는 다르다. this 의 주체가 자동으로 window 로 변경된다. 이걸 Lexical Scope 라고 한다.

화살표 함수로 변경하고 싶지 않다면 this를 바인딩해주어야한다.

Component-Lifecycle

컴포넌트 생명주기

1 그리기 render
2 그리고 난 뒤 componentDidMount
3 그리고 난 뒤 변경됐을 때 componentDidUpdate
4 그리고 난 뒤 사라질 때 componentWillUnmout

export default class CounterPage extends Component {
  
componentDidMount() {
    console.log("그리고 난 뒤");
  }

  componentDidUpdate() {
    console.log("그리고 난 뒤 변경됐을 때");
  }

  componentWillUnmount() {
    console.log("그리고 난 뒤 사라질 때");
  }
  
  render() { // 그리기
    return (
      
      )
  }

}

useEffect

클래스형 컴포넌트에서는 컴포넌트 생명주기를 각각 단계마다 따로 줘야했다면 함수형 컴포넌트에서는 useEffect를 사용하여 줄일 수 있다.

export default function useEffect() {

// 1. DidMount
   useEffect(() => {
     console.log("그리고 난 뒤");
   }, []);


// 2. DidUpdate : DidUpdate와 완전히 동일하지 않다. 수정시에만 실행되지만 이건 처음에도 실행!
  useEffect(() => {
    console.log("그리고 난 뒤 변경됐을 때");
  });


// 3. WillUnmount
   useEffect(() => {
     return () => {
       console.log("그리고 난 뒤 사라질 때");
     }; // return 할 때 함수 실행
   }, []);
  
// 4. render
  return (
   
  )
  
}

이렇게 작성했던 내용도 DidMount와 WillUnmount를 합쳐서 다시 한 번 줄일 수 있다.

export default function useEffect() {
  
  
// DidUpdate
  useEffect(() => {
    console.log("그리고 난 뒤 변경됐을 때");
  });
  
  
// DidMount 와 WillUnmount 합치기
  useEffect(() => {
    console.log("마운트 됨!!!");
    inputRef.current?.focus();

    return () => {
      console.log("컴포넌트 사라짐!!!");
    };
  }, []);

  
  return (
    
    )
}

useEffect와 같이 쓰이는 [] 를 의존성 배열(Dependency Array)이라고 한다.

• 안이 비어있을 경우 한 번만 실행되고 끝난다
• []가 아예 없을 경우 무조건 다시 실행된다
• [count] 의 경우 안에 들어있는 count가 바뀔 때마다 실행된다. 즉, 언제 DidUpdate 가 실행될지 결정할 수 있다.
• [count, writer, title] 처럼 여러 개를 작성할 수도 있다.(셋 중 하나라도 바뀌면 실행)

useEffect는 화면이 그려진 다음에 실행되기 때문에 가장 마자막 useEffect 밑(return 바로 위)에 console.log("Hello") 를 써준다면 콘솔에는 Hello 부터 출력된다.

useRef

documentGetElementById 처럼 특정 태그를 변수에 넣을 수 있게 해주는 hooks다.

export default function USEREF() {

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();
  }, []);

return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  );
}