요약

• 리액트
  • 라이프 사이클
  • 클로저 문제
  • 고차 함수
  • useEffect (중요*)

React

라이프 사이클

react가 DOM에 컴포넌트를 붙여주는 순간 특정한 동작을 하는 것을 라이프사이클이라고 한다. class 방식의 리액트에 관련 함수가 있다. Hooks에는 없음

componentDidMount

처음 렌더함+렌더 성공 상황일 때 실행되는 함수이다.

componentDidUpdate

리렌더될 때 실행되는 함수이다.

componentWillUnMount

렌더된 컴포넌트가 삭제되기 전에 실행되는 함수이다.

위에 나열된 함수들을 라이프 사이클이라고 한다.

(생성)constructor -> render -> ref -> componentDidMount 
(변경)-> (setState/props 바뀔 때) -> shouldComponentUpdate(true) -> rerender -> componentDidUpdate
(삭제)-> 부모 컴포넌트가 지워져서 내가 삭제될 때 -> componentWillUnMount -> 소멸

클로저(closure) 문제

비동기 함수가 비동기 바깥에 있는 변수를 참조할 때 클로저가 발생한다.

이전에 작성했던 var vs let 게시물과 관련된 내용으로 보인다. 스코프, 비동기 함수와 밀접한 관계가 있음.

고차 함수

react안에 jsx속성에 값을 줄 때 함수를 {() => {함수}}이런식으로 주는 경우가 있다.

실무에서는 이러한 형태를 지양하기 때문에 값에 넣을 함수를 정의하는 과정에서 함수를 고차함수로 만드는 방법을 선택한다.

오늘 작성한 코드로 예를 들겠다.

const onClickBtn = () => {...}

<button id="rock" className="btn" onClick={() => onClickBtn('바위')}>바위</button>

위와 같은 코드가 있다. 여기서 jsx내부 onClick 속성 값을 화살표 함수로 넣었는데, 화살표함수를 제거하고 함수 정의에서 함수를 고차함수로 만들면 된다.

const onClickBtn = () => () => {...}

<button id="rock" className="btn" onClick={ onClickBtn('바위')}>바위</button>

고차함수로 만들 때 화살표는 이미 정의된 화살표의 오른쪽에 붙여야 함!!!!!!

useEffect

Hooks에는 라이프사이클 관련 함수가 없다. 이를 대체하는게 useEffect이다. 그러나 1대1로 대응하는 것은 아니다.

useEffect에는 두가지 인자를 줄 수 있다.

• 첫번째 인자: 실행할 내용

• 두번째 인자: 배열

일정 주기에 실행하고자 하는 내용을 첫번째 인자에 넣어주고, 두번째 인자에는 실행될 기준을 넣어주면 된다. 기본적으로 두번째 인자는 배열형태로 받는다.

만약 두번째 인자에 빈 배열을 넣을 시 처음 렌더될 때만 useEffect의 내용이 실행되고 나머지는 실행되지 않는다.

두번째 인자의 배열 안에 어떤 state를 넣으면 그 state가 리렌더될 때마다 useEffect의 내용이 실행된다. state를 여러개 넣는 것도 가능하다.

componentWillUnMountd와 비슷한 효과도 줄 수 있다.

useEffect(()=>{ 
  return()=>{ //componentWillUnMoount 역할
    console.log('종료');
  }
}, [imgCoord]);

다음과 같이 useEffect함수의 첫번째 인자에 return()=>{} 을 넣어주면 해당 부분은 렌더가 지워질 때 실행된다.

다만 마냥 1대1로 대응할 수 없는 이유는 주로 useEffect안에 비동기 함수를 넣는데, 실행 방식이 componentWillUnMountd와는 다르기 때문에 아예 같다고 할 수는 없다.

훅에는 이런 편한 함수가 있다 + 사용법 정도만 숙지하자! 오늘 일정이 생각보다 빡빡해서 투두앱 디버깅을 못 했는데, 내일은 할 수 있을거 같다.