👀 오늘 뭘 했을까?

• 위스타그램 리액트 댓글 / 스토리 / 피드 관련 기능 구현!
• 메인 페이지의 scss를 분리해서 관리하는게 좋을 거 같아서 컴포넌트 단위로 나눴다.
• this.setState 함수의 비동기적인 실행으로 발생되는 state 값의 적용차이를 해결하기 위해 구글링 해보며 콜백함수와 라이프사이클 메소드를 활용해봤다.

😳 오늘 뭘 배웠을까?

1. ComponentDidUpdate

공식문서 정의

• 컴포넌트가 갱신되었을 때 DOM 을 조작하기 위해 활용하면 좋다
• 이전과 현재의 props 를 비교하여 네트워크 요청을 보내는 작업도 해당 메소드에서 이뤄진다.
  🤜 props 뿐만 아니라 이전 state 또한 확인할 수 있었다.

발생했던 문제

• ComponentDidUpdate 메소드 안에서 이전 state 값과 변경된 state 값을 비교하여 this.setState 함수를 실행했다.
• 조건문을 제대로 설정하지 않아 무한루프가 걸려 바로 화면에 에러가 떴다.
  
• 공식 문서에서도 해당 문제에 대해 자세히 설명돼있다.

해결방법

• componentDidUpdate 메소드 내에 조건문 부분을 수정하여 무한루프가 발생하지 않도록 수정했지만 해당 메소드를 이용하지 않고 다른 방법으로 구현할 방법을 찾아봤다.
• this.setState 함수에 두번째 인자로 콜백함수를 선언하여 업데이트된 state 의 값을 받아와 비동기로 인해 발생했던 값의 차이로 인한 오류를 해결했다.

2. 이중 삼항연산자

• if - else 조건문을 삼항 연산자로 바꾸면서 A ? B : C 구조로만 수정하다 A ? B : C ? D : E 와 같이 이중으로 삼항연사자를 사용할 수 있다는 사실을 구글링하며 알게 됐다.
• 사용 경우 예시
  🤜 요소의 길이가 260 보다 작을 때 와 클 때 2가지 경우
  🤜 클 경우 gap의 값이 260보다 작을 때 와 클 때 2가지 경우
• 스토리 클릭 이벤트 구현을 하며 if - else 문을 여러 번 사용하기 보다 이중 삼항연산자로 구현해볼 수 있었다.