210325_TIL(Lifecycle, Recast.ly)

✅Toy 문제 binary Search

오름차순 정렬된 정수의 배열(arr)과 정수(target)를 입력받아 target의 인덱스를 리턴하는 문제였다.

이 문제는 그전에 했던 김장인 알고리즘 문제랑 많이 비슷했던 것 같다.

이진 탐색 알고리즘을 알고 있었다면 조금은 풀기 쉬웠던 문제였던 것 같다.

나는 반복문을 이용해서 인덱스의 최소, 최대 값을 따로 저장하여 탐색이 진행될 때마다 갱신하고 탐색하는 그리고 배열의 범위를 줄여나가는 방식으로 풀었다.

 

✅Lifecycle

강의를 통해서 거의 이해를 했지만, 공식 문서도 몇 번은 읽어보면서 생명주기에 대해서 배운 것 같다.

아직 직접 코드로 마운팅, 언마운팅까지 해보질 않아서 사실 잘 와 닿지는 않는 것 같다.

 

✅Recast.ly

오늘 스프린트 리뷰가 늦게 끝나서 할 시간이 별로 없었던 것 같다.

이 스프린트를 이해하는 데에만 시간이 많이 쓰였던 것 같다.

오늘은 컴포넌트 간 관계를 이해하고 어떤 식으로 만들어야 할지 페어 분과 의견을 많이 나누었다.

아마 내일 잘 마무리할 수 있지 않을까라는 생각만 하고 있다.😄

이 스프린트는 유튜브 클론 코딩과 많이 비슷하다고 생각이 들어서 잘 만들어 보고 싶다.

 

🍒Remember

---

✅State and Lifecycle

react는 컴포넌트 기반 라이브러리이며 컴포넌트들은 탄생(Mounting)부터 죽음(Unmouting)까지의 생명 주기를 가진다.

생명주기 메서드의 이름만 봐도 어떤 역할이 있는지 대략 짐작할 수는 있지만 명확히 어느 시기에 호출되는지 알고 있는 것이 중요하다.

위에 링크를 꼭 보고 숙지하는 것이 좋다.

 

컴포넌트에 있어서 중요한 순간은?

• 생성될 때 => 생성
• 화면에 등장한(mount) 후 => 생성

componentDidMount()

ToggleSwitch를 제거하니까 화면에서 사라지기 전 메시지가 뜨고, 다시 추가했을 경우에 '화면에 등장한 후'라는 메시지를 보여주면서 생성된 것을 확인할 수 있다.

• 새로운 props를 받을 때 => 업데이트
• 새로운 상태를 가질 때  => 업데이트
• 새로운 상태를 갖고 난 후  => 업데이트

componentDidUpdate()

생성이 된 후에 버튼을 눌렀을 때 렌더링 한번 되고 새로운 상태를 가지게 됐을 때를 알려준다.

• 화면에서 사라지기(unmount) 전 => 제거

componentWillUnmount()

ToggleSwitch가 주석 처리되거나 없어지면 화면에서 사라지기 전 콘솔 창이 뜨게 된다.

매 중요한 순간마다, 컴포넌트는 새로 렌더링(render)된다.

*사라지기 전 제외

 

왜 필요하지?

상태가 변화했을 때에 처음 마운트가 됐을 때에 비동기 요청을 보낼 때가 많다.

컴포넌트 안에서 비동기 요청을 보낼 때 constructor, render는 async/await으로 사용할 수 없다.

그때에 부를 수 있는 것이 Lifecycle이다.

 

🍒More Study

---

✅State and Lifecycle

✅State 끌어올리기(Lifting State Up)