항해99-4주차 기록(주특기 심화-React)

 

*라이프 사이클 (클래스 컴포넌트)

마운트(생성)

• [constructor] - 컴포넌트가 만들어지면 가장 먼저 실행되는 생성자 메서드
• [render] - 컴포넌트를 렌더링하는 메서드
• [componentDid-Mount] -컴포넌트의 첫번째 렌더링을 마치고 나면 호출. 메서드 호출 시점에는 컴포넌트가 화면에 나타내기 완료

            1)DOM 을 사용해야하는 외부 라이브러리(D3, masonry 등) 연동을 하거나, 2) 해당 컴포넌트에서 필요로하는 데이터를

               요청하기 위해 **ajax 요청(axios, fetch 등)**을 하거나, 3) DOM 의 속성을 읽거나 직접 변경하는 작업을 진행.

 

수정: 부모가 자식에게 주는 데이터 값이 변경된 경우(props)

• [getDerivedStateFromProps] - 컴포넌트의 props 나 state 가 바뀌면 호출됨.
• [shoudComponentUpdate] - 컴포넌트가 리렌더링 할지 여부를 결정.
• [render] - 가상 DOM에서 DOM으로 바뀐 부분을 올리고 화면에 뿌려준다.
• [getSnapshotBeforeUpdate] - 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용
• [componentDidUpdate] - 리렌더링이 마치고, 화면에 원하는 변화가 모두 반영되고 난 뒤 호출됨. 3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값 조회가능

*라이프 사이클 (함수 컴포넌트)

    함수형 컴포넌트에는 "React Hook"이 있는데, 훅으로 함수형 컴포넌트들을 관리한다. 클래스형 라이프사이클에 나왔던 모든 phases( componentDidMount, componentDidUpdate, componentWillUnmount)는 useEffect Hook에 의해 실행됩니다.

 

-useEffect를 함수 컴포넌트에서 사용함으로써, state, props에 접근할 수 있고, componentDid-Mount, componentDidUpdate의 라이프 사이클을 수행하게 할 수 있다. 또한 return 이하에서 componentWillUnmount 실행 가능.

 

 

*React Hook?

 

• React 16.8 버전 (2019년도) 에 추가된 공식 라이브러리
• Class형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 Function형 컴포넌트에서도 사용 가능하게 함

 

• Hook의 규칙
  • React 함수(컴포넌트) 최상위에서만 호출할 것
  • (반복문, 조건문, 중첩된 함수 등에서 호출 X)
  • React 함수에서만 호출할 것
  • (Custom Hook에서는 호출 가능하나, 일반적인 JavaScript 함수에서는 호출 X)
  • Hook을 만들 때 앞에 use 붙이기
  • (Hook 규칙이 적용되는지 파악이 쉽도록)
  • React는 Hook이 호출되는 순서에 의존
  • (한 컴포넌트에서 여러 개의 Hook이 사용될 경우 위→ 아래로 순서에 맞게 작동함)
• Hook의 종류
  
  • 기본 훅
    1. useState (동적 상태 관리)
    2. useEffect (side effect 수행 -mount/unmount/update)
    3. useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)
  • 추가 훅
    1. useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
    2. useCallback (특정 함수 재사용)
    3. useMemo (연산한 값 재사용)
    4. useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)

(*세부적인 Hook의 사용법이나, 내용들은 추가학습 완료 이후에, 개별적인 게시글로 다뤄서 링크 하겠다..)

 

 

#4주차 마무리

   이번주까지는 리액트에 적응하느라 정신이 없었던 주간인것 같다. 처음으로 과제를 제출하면서 요구 기능을 완벽하게 구현하지 못하고 제출을 했는데, 그러다 보니 리액트라는 녀석한테 일주일 패배한 것 같은 느낌이 들어서 기분이 별로 좋지 않았다. 중간에 몸이 좋지않아 날렸던 1~2일이 매우 아쉽게 느껴졌으나, 결국 컨디션 관리도 내 문제라고 생각해서 인정하고 더 신경쓰기로 했다. 한정된 시간에 많은 양을 받아들이려 하다보니, 정리가 되지 않은 느낌이었고 아무래도 이건 따로 공부한 것들을 대충 정리하는 습관 때문인것 같아서 다시 모르는 부분이나 새로 습득한 내용들을 기록하려는 시도를 하고 있다. (slack에 올려주신 http://egloos.zum.com/agile/v/5838463 도 참고중...).

아주 행복했던 점은 이 길을 혼자서 가고 있었다면, 막히는 부분에서 계속해서 포기했을 수도 있을거 같은데 2주째 옆에서 자리를 지켜주는 태민님, 수영님, 다희님이라는 든든한 조원과 멘토님들 덕에 정말 모르겠는 부분들은 질문도 하고, 내가 아직 건들여보지 못한 부분에 대한 경험들을 듣는 간접경험을 통해 이해력도, 재미도 늘어가고 있다는 점이다. 나도 얼른 조원에게 도움을 줄 수 있는 개발자가 되고 싶고, 이후에 내가 새로 진입하는 개발자들을 만났을때, 똑같이 도움을 주리라 하는 생각들이 스치는 한주였다.