23.02.19

# 클래스형 vs 함수형 (부제 라이프사이클 vs react hook)

컴포넌트는 생성(mount) ㅡ> 업데이트(update) ㅡ> 제거(unmount)의 생명주기를 갖는다.

클래스형은 라이프사이클을 이용하고 함수령은 hook을 사용한다.

#클래스형의 라이프사이클 

#생성(mount) - 컴포넌트가 생성될때

• constructor - 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드
• render - 랜더링하는 메서드
• componentDidMount - 첫번째 렌더링이 마치면 호출되는 메서드, 즉 화면에 컴포넌트가 나타날때

#업데이트(update) - 컴포넌트가 수정될때 

• shouldComponentUpdate - 컴포넌트가 리렌더링 할지 말지 결정하는 메서드(React.memo와 비슷)
• componentDidUpdate - 업데이트 되고 난후 발생(useEffect가 실행하는것과 비슷)

#언마운드(unmount) - 컴포넌트가 종료될때

• componentWillunmount - 컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드

#함수형의 Hook

#사용규칙!!! 이것만은 지키세욧!!

• 최상위에서만 호출해야된다.
• 반복문 조건문 충된 함수내에서 Hook을 실행하면 안된다. (렌더링 간에 Hookd을 건너 뛰기 때문에 Hook의 호출순서가 달라진다고 한다 by 공식문서)
• 함수형 컴포넌트 안에서만 Hook을 호출해야된다.

#함수형의 Hook 종류

• useState - 상태관리 [state(컴포넌트 데이터를 저장), setState(state 변수, 해당 변수를 갱신할수 잇는 함수를 반환)]
• useEffect - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook 즉 라이프사이클을 대체하는 Hook 업데이트 시킬때 많이 쓰면 좋을꺼같은디? 처음 마운트시킬때랑? 그냥 그렇다구...
• useContext - 내게 필요한 props를 글로벌하게 사용할수 잇게 도와준다. 음... API모아둘때 useState를 가져와야하는 상황이 오는거 같던데 그때 쓰면 좋을꺼같다. 
• useRef - 컴포넌트의 속성을 조회 수정 한다. focus를 위치 시킬때,속성값을 초기화할때 사용하는거 같은데 많이 쓰이지는 않는듯하다.
• useMemo - 이미 연산된 값을 리렌더링 시 다시 계산하지 않도록 하는 메소드. 의존성이 변경됫을때만 리렌더린된다.

#이번주 후기.... 

후.... 이번주 겁나 빡세다.. 리덕스 툴킷사용하는법 thunk사용법 리액트쿼리 로그인 할때 쓰는 jwt도 배우구 백엔드분들이랑 통신할때 쓰는 axios 도 공부하구.... 공부할거는 많고 시간은 너무잘가고 머리에는 안들어오고 나만 뒤쳐지고 잇는 기분이 확실히들고 다들 걷는데 나는 기지도 못하는거 같은 기분이 많이든다. 

작업을 하면 무조건 전에 햇던 내용들을 찾아보면서 작업을 하게되서 의존을 너무 하는거 같다.

쓰는법을 이해하면서 외워야하는데 이해는 그럭저럭 한거같은데 외우질 못함... 젠장... 영어 너무 어려웡 뭔지는 아는데 스펠링 틀려서 안되는 경우도 잇고 머리 겁나 빠지는 한주다.. ㅠㅠ 요즘 생각나는게 진짜 나같이 공부하면 안되는데 현장가면 겁나 털릴꺼같은 그런 느낌? 당연히 털리겟지... 누가 이런 개발자를 써줘ㅠㅠ 단톡의 개발자 슨배님들은 원래 그렇게 크는거라는데 내가 너무 조급한걸까라는 생각이 든다. 나두 공부 잘하구시포.... ㅠㅠ