[WIL] 항해99 4주차 회고

📚 항해99 4주차 WIL

💻 리액트 2 프로젝트

✏ 프로젝트 기간: 2022.01.28 ~ 2022.02.03
✏ 팀원: 1명
✏ 프로젝트 명: 나만의 사전
✏ 프로젝트 소개: 게시물 추가, 삭제, 수정 구현. 모달창 생성

백지 상태인 코린이가 처음으로 리액트를 직면하고 험난한 개발 세계에서 살아남고자 아등바등 쫓아가는 대서사를 기록하기 위한 글.

📢 어떤 프로젝트를 완성했을까

Github URL

📕 프로젝트에서 중점적으로 습득한 건

📌 라이프사이클(클래스형 vs 함수형)

리액트에는 컴포넌트마다 라이프 사이클(생명주기)가 존재하고 있다. 리액트에서는 SPA를 사용하기 때문에 컴포넌트들을 보다 효율적으로 관리하기 위해서.
컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다.

리액트에는 9가지의 라이프 사이클 메소드를 가지고 있는데 그중 가장 중요한 3가지 만을 이야기해보고자 한다.

• componentDidMount
  컴포넌트의 첫번째 렌더링이 마치고 나면 가장 먼저 호출되는 메소드. 이 단계에서는 이미 render메소드를 통해 컴포넌트를 렌더했기 때문에 우리가 보는 화면이 출력된 상태이며, 외부에서 데이터를 가져오거나, 라이브러리 연동, axios연동, DOM의 접근하여 속성을 가져오거나 수정할 수 있는 단계.

• componentDidupdate
  리액트에서 업데이트가 되는 경우는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트가 된다. componentDidupdate는 리렌딩이 마치고, 화면에 변화된 내용들이 적용된 이후 단계에서 호출되는 메소드.

• componentWillUnmount
  componentDidMount와는 반대로 컴포넌트가 화면에서 사라지는 단계에 속하며 componentWillUnmount는 컴포넌트가 화면에 사라지기 직전에 호출되는데 이때 우리는 이벤트나 타이머등을 제거하기 위해 주로 사용한다.

라이플 사이클 메소드는 class형 리액트에서 사용되는 내용들이고 리액트 공식 홈페이지를 보게 되면 지금은 class형 보다는 함수형 컴포넌트를 사용하기를 권장하고 있다.

📌 react hooks

함수형에서도 컴포넌트가 마운트되고 업데이트되고 업마운트되는 과정이 있고, 이를 관리하기 위해 useEffect라는 React hooks를 사용하고 있다.

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.

이후 useEffect안에서 함수를 리턴할 수 있는데 그걸 cleanup 함수라고 한다. cleanup이라는 이름과 비슷하게 컴포넌트가 사라질 때 실행되기 때문에 화면을 정리한다는 의미로 이해하시면 될 것 같다.
(정리를 하자면 리턴이전의 첫번째 함수에서는 componentDidupdate와 componentDidupdate의 단계가 진행되고 cleanup함수 자리에서 componentWillUnmount의 단계가 있다고 생각하시면 이해가 쉬움 :) 사진 참조 ! )

useEffect에서 데이터가 변할 때 마다 화면을 업데이트 하기 위해서는 의존성배열에 기본 값을 지정하고 이 값이 변할 때마다 첫번째 피라미터에 넣었던 함수가 실행할 수 있도록 할 수 있다.

📗 프로젝트를 끝내고 나니

4주차 주특기 구간의 두번째 주가 지났다. 리액트(React)... 어렵지만 재미있는거 같다. 개념적인 부분을 이해하고 코드 짜는것도 제법 익숙해지고 있는중인데 순조롭게 진행 되다가도 불쑥불쑥 모르는 개념이나 막히는 부분이 생기는 것 같다. 개발자가 되어가는 과정에서 아주 당연한 부분이라고 생각한다. 우리는 문제를 해결하는 숙명을 가지고 있으니.. 이번주 역시 과제를 하면서 막히는 부분이 있었는데, 전과는 다르게 유연하게 푸는 방법을 생각하고 어떤 방식으로 해결해야 하는지 아는 느낌이라 생각보다 빠르게 해결하였다. 좀 더 많은 문제를 겪고 해결하다보면 시간도 단축될거라 생각한다. 또한 팀원들과의 코드리뷰를 하면서 많이 도움이 되는것 같다. 리액트는 특성상 개개인의 코드와 구조가 많이 다를수 밖에 없는데 다른 사람이 짠 코드를 보면서 '저런 구조로 짤수 있구나'라고 생각이 들면서 뭐가 더 좋을까? 라는 고민도 함께 하게 되는것 같다.