잡담

이번주는 심화주차로 저번주의 강의에 비해 좀더 편리한 기능을 구현하기 위한 강의를 들으며 익혔다.
아무래도 좀 더 심화된 내용 이다보니 강의를 듣는 동시에 이해하는것이 어려웠다. 강의를 듣고 따로 이해하는 시간을 가졌어야 했고, 팀원분과 그 내용을 나누면서 이해를 높여갔다.

내용정리

• 쿠키 및 리덕스
  https://velog.io/@kbs2082/React%EC%BF%A0%ED%82%A4-%EB%B0%8F-%EB%A6%AC%EB%8D%95%EC%8A%A4
  
• 라이프 사이클 (클래스형)

constructor()

이 메서드는 컴포넌트가 마운트 되기 전에 호출 된다.
목적은

this.state에 객체를 할당하여 현재 component의 state를 초기화하고,
이벤트를 발생시키는 곳에 이벤트 처리 메서드를 연결하기 위함이다.

render()

render 함수는 유일해야 하며,컴포넌트 생성 시 꼭 필요로 하는 메서드이다.
render()는 순수 함수이다. 그렇기 때문에 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 한다.
브라우저와 직접적으로 상호작용을 하지 않는다.(DOM 조작)
이 때 필요한 것이 componentDidMount() 같은 생명주기 메서드이다.

componentDidMount()

DOM 트리에 삽입된 직후 즉, 초기 브라우저 화면을 갱신하기 전에 호출 되는 메서드이다.
fetch, 스크롤 이벤트,setInterval 같은 초기에 설정이 필요한 경우 이곳에서 작업을 한다.
만약 스크롤 이벤트,setInterval 를 호출 했다면 componentWillUnmount() 메서드를 통해 해제 작업을 진행해야 한다.

setState(nextState,callback)

컴포넌트의 변경사항을 React에게 알리는 메서드로서 비동기적으로 작업을 수행하는 함수이다.

기본적으로 현재 state를 setState에서 update하려는 nextState를 이용해서 merge하는 동작을 한다.
주로 객체 형태이며 Function형태로도 쓰인다.
merge라고 하는 이유는 기존 state 값을 유지하면서 바뀐 state만 변경할 수 있는 객체의 특성 때문이다.
만약 새로운 객체를 추가할 때, 해당 key가 존재한다면 key를 추가하는 것이 아닌 기존 key에서 값이 변경된다.
뒤에 callback은 주로 현재 상태 값이 제대로 바뀌었는지 확인하고 싶을 때 사용한다.
callback은 setState()의 실행이 완료되고 컴포넌트가 다시 랜더링 되고 난 이후 실행된다.
공식 문서에도, callback에서 다음 작업을 진행하기보다는 componentDidUpdate를 사용하길 권장한다.

componentDidUpdate(prevProps,prevState,snapshot)

업데이트가 일어난 직후에 호출되는 함수이다.

최초 랜더링시에는 호출되지 않는다.
DOM을 조작할 때 유용하다.
또한 이전,이후의 props를 비교하여 바뀔 경우에만 네트워크 재요청시에도 유용하다.
위 인자중에 snapshot은 getSnapshotBeforeUpdate() 메서드의 리턴 값을 받는 param이다. 없다면 undeifined 처리된다.

componentWillUnmount()

컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
컴포넌트를 DOM에서 제거할 때 실행된다.
위 그림에서 처럼 제거 버튼을 클릭 했을 때 render 메서드가 실행되고, DOM에서 제거 되기 전에 Item 컴포넌트의 componentWillUnmount가 실행되었다.
App컴포넌트 라이프 사이클 : Event Button(제거) click > render() > componentDidUpdate()
Item 컴포넌트 라이프 사이클 : componentWillUnmount()

• 라이프 사이클 (함수형) Hook

리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 구현한 개념입니다. 예를 들어, 클래스 컴포넌트에서만 사용 가능했던 state를 훅(hook)을 이용해 함수형 component에서도 useState 를 이용해서 상태 변수를 선언할 수 있습니다. 또한, useEffect 를 통해 리액트 클래스의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프 사이클 을 관리 할 수 있습니다.

componentDidMount, componentDidUpdate 수행

useEffect는 컴포넌트 안에서 state, props에 접근이 가능하고, 기본적으로 첫 번째 렌더링과 그 이후의 모든 업데이트에서 수행된다. 또한, 두 번째 인자로 조건을 걸고 첫 번째 렌더링이나 특정 조건을 만족할 때 수행하도록 설정할 수 있다.

clean up 실행

모든 effect는 정리를 위한 함수를 반환 할 수 있다. 즉, 추가와 제거가 하나의 effect를 구성하는 것이다. 정리되는 시점은 컴포넌트가 마운트 해제될 때 실행된다.