[CS] Life cycle / Aop

✅ 이미지로 미리보는 라이프 사이클

---

• 출처

  wjd489898

✅ 라이프 사이클

---

• class 컴포넌트와 React hooks

  • 컴포넌트가 마운트 된 직후 호출된다. 초기화 작업은 이 메서드에 이루어지며 된다.
    API요청을 통해 외부에서 데이터를 가져와야 한다면, 요청을 보내기에 적절한 위치이다.
    componentDidMount()

  useEffect(() => {
          console.log("렌더링 후 실행");
  }, []);

  • 데이터가 갱신이 일어난 직후에 호출된다. 그래서 처음 렌더링 될 때는 호출되지 않는다. 이전의 props와 현재의 props를 비교하기 때문에 특정 props 변화에 따라 네트워크 요청을 보내는 메서드에 이루어지면 좋다.
    componentDidUpdate(prevProps, prevState, snapshot)

  useEffect(() => {
    console.log("변경되고나서 실행");
  },[value]);

  • 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다. 이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행하면 된다.
    componentWillUnmount()

  - useEffect(() => {
       console.log('componentDidMount[Function]');
  
       return () => {
               console.log("사라지기전에 실행!");
       }
   }, []);

✅ class 컴포넌트의 특징

---

• React를 사용할 때는 컴포넌트를 class 또는 함수로 정의할 수 있다. class로 정의된 컴포넌트는 아래에 자세히 설명하고 있듯 보다 많은 기능을 제공한다. React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 한다.

  render()이 메서드가 호출되면 this.props와 this.state의 값을 활용하여 반환한다.

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

• 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다. React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다. React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 한다. 그렇지 않으면 this.props가 생성자 내에서 정의되지 않아 버그로 이어질 수 있다.

  constructor(props) {
    super(props);
    // 여기서 this.setState()를 호출하면 안 됩니다!
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

✅ useEffect()

---

• 의존성 배열

  "effect 함수가 의존하고 있는 요소들의 모음"이라고 할 수 있다. 단순히 그냥 effect 함수가 사용하고 있는 외부의 값들이 의존성입니다. []안에 외부의 값들을 넣어주면 된다.

  useEffect(()=>{
  	console.log("useEffect")
  },[])

• 🔥 주의사항

  • useEffec 안에는 하나의 관심사만 해결하자.
    => 한 곳에서 많은 기능을 해결하는 것 보다는 나누어서 여러개의 관심사로 나누는 것이 좋다.
    
    
  • 되도록이면 의존하지 않게 사용한다.
    => setCount는 메모리 참조 값이 변하지 않아, 굳이 의존성 배열에 넣지 않아도 된다. setState((oldState)=> oldState+1)로 사용해 주는 것이 좋다.
    
    
  • ReactComonent: (props, state) => UI
    => 원래 함수는 pure-function 같은 input이면 같은 output이 나오게 하는 것이 좋은데, sideUseEffect라는 말처럼 sideEffect를 발생시키는 요소들이므로 잘 관리하여 사용해야한다.
    
    
  • 1번만 사용해야 하는 것들
    component 밖에 선언하면 import 될 때 1번만 되기때문에 활용 하자.
    
    
  • 메모이제이션은 항상 최후의 수단으로 써라!

✅ 관심사의 분리(Seperation of Concerns)

---

• 내용

  단일 책임 원칙SRP 하나의 책임만을 가져야 한다는 원칙과, KISS(Keep It Simple Stupid) 간단하고 단순하게 만들어라는 격언들이 있다. 이런 격언들이 생겨난 이유는 이 코드가 수정될 이유를 한 가지만 존재하게하여 유지보수를 좋게 하기 위함이다.

• Custom Hook

  • React의 Hook들을 호출하는 함수여야 한다.
  • 함수의 이름은 use로 시작해야 한다.
    => 개발자들의 관습처럼 쓰이는 용어이며, eslint가 use가 쓰인 것을 훅으로 보고 검사하기에 꼭 유념해서 써야한다.

• 주의사항

  • 서로가 무엇을 하는지는 모르게 사용하는 것이 좋다. 무엇을 하는지 알게 된다면 그것은 관심사의 분리가 제대로 된 것이 아니다.
    
    
  • 범용성을 가진 것들은 메모이제이션 해주는 것이 좋다. 쓰는 쪽에서 어떻게 쓰일지 모르기에 사용자가 어떻게 하면 편할지 생각을 한다.
    
    
  • useEffect 훅은 React 컴포넌트의 최상위 레벨에서만 호출해야 한다. 그 이유는 React가 렌더링 사이클 동안 useEffect를 관리하고 효과(Effect)를 적절하게 처리하기 위함이다.if문이 조건에 따라 여러 번 실행되는 경우, useEffect도 여러 번 호출될 수 있으며, 이는 의도치 않은 효과를 초래할 수 있다.

✅ 횡단 관심사

---

• 내용

  여러가지 비즈니스 로직에 공통으로 처리되는 것들이다.

• 대표적으로 쓰이는 곳

  • 인증 & 인가
  • 로깅
  • 트랜잭션 처리
  • 에러처리

---

• 출처
  React.Component