[항해뀨 3기] 3주차 회고

https://jjyabbu.tistory.com/35

11_[항해99 3주차 React 심화]_2021.09.30

https://jjyabbu.tistory.com/38

12_[항해99 3주차 React 심화]_2021.10.02

TIL을 두개밖에 못적다니..!! 수치스럽다. 깎여나가는 나의 자존심.

 

벌써 3주차..?

저번주차는 리액트 기초반 강의를 듣고 개인과제를 하는거였다면,

이번주차는 리액트 심화반 강의를 듣고 개인과제..!!

 

 

기초반 듣고나서 심화반 들어갈때 나의 모습

 

전자풍화 무슨일이야

 

현재

 

아니.. 1기 2기 크루원분들은 심화반을 3일만에 다 들었다는데 사실입니까?

예???

아니..ㅋㅋ..아니..ㅋㅋ..아니..ㅋㅋ..아니..ㅋㅋ

물론 제일 많이 하차하는 구간이라고 들었지만 말이죠. 예? 

그래도 다행인건 과제 순한맛이 강의에서 진행하는 실습이랑 같은듯한건데..

흠.

흠...

한국인한테 매운맛이란 단어를 보여주시면..흠...

아니 그치만 겨우 2주차 끝자락 들으면서 무슨 매운맛이야!! 매운맛은 포기해야지. 암!!

 

.....

.....

 

 

재등장하는 신지(01년생)

 

물론 강의를 다 듣고 해야겠지만 이미 할 생각 가득이다.

그치만 너무 재밌어보이니까 암암 재밌어보이게 만든 항해99매니저님들이 나쁜거임. 암암.

 

아무튼 제대로 회고를 써보자.

이번주차의 키워드는 뭐더라 리액트의 라이프사이클과 리액트 훅!!

라이프사이클에 대한거면 기본주차때 배웠지? 드디어 여태 필기해둔 노트의 빛이 발하는 순간.

일단 공식 문서 링크는 아래와 같다.

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

근데 솔직히... 공식문서는 뭐라는지 모르겠고 내 노트나 봐야겠다.

 

라이프사이클!

[ 생성 , 업데이트 , 제거 ] 리액트에서 이 3개의 단계가 합쳐진 콤비네이션 이 아니라 흘러가는 방식이라고 보면 된다. 

생성은 말 그대로 생성을 하고 

업데이트는 말 그대로 업데이트

제거는 말 그대로 제거 

 

 

...솔직히 좀 더 구체적으로 설명하고싶어도 간단한 생각밖에 떠오르지않는다.

우리가 사이트에 들어가면 거기 나올 녀석들이 생성된다. 

사이트에서 뭔가를 클릭해서 그 안의 정보를 바꾸면 생성된 녀석들중 몇개가 업데이트 될거고

쓸모없어진 컴포넌트가 제거되면..뭐..제거되는거고..

 

그리고 클래스형 컴포넌트에서는 이 라이프사이클을 토대로 사용할 수 있는 함수들이 있는데

componentDidMount, componentDidUpdate, componentWillUnmount

이 세개의 함수의 컴비네이션으로 (덴경대 아님) 생성후, 업데이트 후, 삭제 후에 발생하게 하고싶은 동작을 코드로 적어놓을 수 있다.

componentDidMount 는 처음 DOM에 모든 녀석들이 올라간 후, 즉 처음 렌더링 후의 1회만!

componentDidUpdate는 props나 state나 부모컴포넌트나..강제로 업데이트 시켰을때 발생!

componentWillmount 는 컴포넌트가 삭제, null이 될때!

 

문제는 저 함수 자체는 클래스형에서밖에 못쓴다는 점과 리액트가 

"클래스형 말고 함수형쓰시져?^^?" 라고 해버렸다는것. 

 

그럼 함수형 컴포넌트에서 못쓰냐? 쓸 수 있다. 바로..훅(Hook)을 이용해서.

 

useEffect 라는 훅을 사용하면 componentDidMount 와 componentDidUpdate를 섞은듯한 효과를 볼 수 있다.

즉, 이녀석은 처음 렌더링 하고 이후 렌더링할때, 즉 렌더링을 할 때마다 실행한다는 의미다.

이걸 이용하면 로그인 전 사이트의 상단에 로그인/회원가입 버튼이 있던걸 로그인 후에는 삭제하고 그 위치에 마이페이지 버튼같은게 보이도록 할 수도 있다. 편리!

이거 외에도 useState 처럼 state를 쓸 수 있게 해주는 녀석도 있고..뭐..안써본 녀석들이 많다. 아마 useState랑 useEffect만 써본거같은데.. 공식문서는 아래와 같다. 

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

 

 

사실..훅은 아직도 아리송한점이 있다. 그래도 처음에 쓸때는 어디에 뭘 넣어야 어떻게 되는진 몰랐지만

지금은 그래도 잘은 몰라도 이런 상황에 쓰면 되는건가? 하면서 사용하고있다.

코딩은 정말 많이 하면 늘고 많이 하다보면 언젠가 벼락맞은것처럼 이해되곤하니..

하다보면 되겠지!

 

아무튼 회고 끝.

TIL은..오늘꺼는 솔직히 쓸만한게 없다. 일욜이라고 가족들이랑 금쪽같은 내새끼 보면서 아이고 이뻐 애기 이뻐 ㅠㅠ 거리며 울었더니 시간이..흠.. 아무튼. 끝.