WIL 0530~0605 4주차 회고

라이프사이클

라이프 사이클, 생명 주기라고 불리는 이는 컴포넌트가 렌더링되고 사라지는 과정이라 볼 수 있고, 컴포넌트가 실행되거나 업데이트되거나 제거될 때 특정한 이벤트들이 발생한다.

함수형 라이프사이클

Mount

컴포넌트가 처음 실핼될 때 그것을 Mount라고 표현한다.

componentDidMount

컴포넌트가 렌더링 된 후 실행되는 함수이다. 렌더링 이후 처음 한 번만 실행할 명령이 있다면 이 함수를 사용한다.

componentDidUpdate

컴포넌트에서 데이터 등이 변경되어 리 렌더링 될때 실행되는 함수이다. 데이터 변경에 따른 명령을 실행할 때 사용할 수 있다.

componentsWillUnmount

컴포넌트가 사라질 때 사용하는 함수이다. 보통은 이벤트 처리기를 clean up하던지, error메세지를 송출할 때 사용 할 수 있다.

### 함수형 라이프사이클

React.useEffect

함수형에는 위에 작성한 components... 개념이 없다. 대신 useEffect 리액트 훅을 사용한다

React.useEffect(()=>{
// .... 실행할 명령어 
//   componentDidMount, componentDidUpdate 부분이 여기다.
  return ()=>{
  // 컴포넌트가 사라지고 실행 할 함수
  //componentsWillUnmount 부분이 여기다.
  }

},[/*반복할 변수*/]);

컴포넌트가 렌더링 되면 위 명령어를 실행한다. 그리고 리렌더링 될 때 마지막에 작성한 "반복할 변수"가 변할 경우 함수를 다시 실행한다. return 뒤에 있는 함수는 컴포넌트가 종료될 때 실행하는 함수이다.

react hook

위에 라이프사이클만 봐도 class형 함수가 얼마나 문법적으로 어렵고 복잡한지 느낄 수 있을 것이다. 그래서 요즘은 react 자체에서 함수형을 쓰도록 권고하고 있고 추세가 변하고 있다. 다만, class 함수에는 state, 라이프 사이클 등 장점이 있었는데, 함수형에서도 이를 해결하기 위해 v16이후 Hooks가 도입됐다.

자주 사용되는 useState, useEffect 등이 있고, 콜백, Memo 등 다양 hooks으로 함수형 컴포넌트에서도 유연한 동작을 할 수 있다.

[https://ko.reactjs.org/docs/hooks-intro.html] react 공식 문서

주특기 주차

이제 주특기 2주차를 마치고 3주차 심화과정을 시작했다.
다행스러운건? 생각보다 잘 적응한 것 같다. 처음에는 사용하던 모던JS에서 사용하는 방식과 많이 달라서 적응에 어렵다고 생각했는데, JS를 쓴 기간이 없어서 그런지 지금은 React가 더 편한 것 같다.
이번 주차에 큰 목표는 Redux였는데, 어느정도 익혀가는 중인 것 같다. 하지만 현업에서는 toolkit을 사용하는 것 같고 어제부터 toolkit을 이용하여 코드를 작성하고자 하는데, 같은 redux이지만 처음 배우는 느낌이 든다....

일주일을 마치며

어느정도 리액트에 적응했으니 다양한 방법을 통해 기본기를 다지는 작업이 필요 할 것 같다.
이번주는 헤이해진 느낌을 많이 받앗고, 학습이 더딘 한 주라고 생각한다. 다행이 심화주차 시작과 동시에 각성할 필요를 느끼고 다시 달릴 준비를 하고 있다. 이제 협업 프로젝트를 하기 전 마지막 여유로운? 점검 주차가 될 것 같은 느낌이 3주차에 중요성을 다시금 느끼게 하는 것 같다.

블로그 이름처럼 꾸준하면 반이상은 간다고 생각하고 있다. 꾸준히 끝까지 완주해보자