230606(화)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

useEffect에 대한 고찰

이번 프로젝트에서 마지막 주차 때 무슨 코딩 기계 마냥 구현에 집중하다보니 깨달은 게 하나 있다. 리액트의 함수 컴포넌트에서 이 useEffect라는 녀석이 참 라면 스프 같다는 것이다. 이 useEffect는 컴포넌트가 렌더링이 끝난 직후 특정 작업을 수행하도록 할 수 있는 Hook이다. 이름에서 알 수 있듯이 effect 즉, side effect를 수행하는 역할을 한다. 리액트는 ui를 그리기위한(렌더링하기 위한) JS 라이브러리이다. 그렇다면 ui를 그리기위한 라이브러리에게 side effect는 무엇일까? 데이터를 받아오는 작업, 이벤트를 등록하고 해제하는 작업, 타이머를 설정하고 해제하는 작업 등이 side effect에 해당한다. 이러한 작업들은 렌더링과는 관련이 없는 작업이다. 그래서 리액트에서는 이러한 작업들을 useEffect를 통해 처리한다. 헌데 그런 경우가 있다. fetch 라는 비동기 api를 사용하여 어떤 state를 setState하는 작업을 useEffect 내부에서 처리하는 경우이다. 그렇다면 이건 정말 괜찮은 것일까?
하나의 컴포넌트 생애주기에서 해당 컴포넌트가 처음 input을 받을 수 있는 방법은 3가지가 있다.

• 부모에게 받은 props
• 자체적으로 가지고 있는 state
• provider를 통해 받은 context

초기에 받은 위의 3가지를 통해 이뤄진 첫 렌더링 이후에 일어나는 렌더링 또한 side effect라고 볼 수 있다. 그렇기에, 렌더링의 효율을 생각하지 않고 useEffect를 사용하면 렌더링이 불필요하게 발생할 수 있다. 이런 점이 useEffect가 최대한 지양해야하는 라면 스프같다는 이유이다. 최대한 내가 갖고 있는 props, state, context를 handling할 수 있는 handle 함수를 잘 만들고 도저히 handle 함수로는 되지 않을 때, 그 때 useEffect를 사용하자.

📝 요약 및 하루 간단 회고

다시 성장일지 열심히 작성할 것이다!!! 매일 매일 작은 단위의 계획을 세우고 분할 정복으로 이뤄나갈 것이다! 할 수 있다, 아자아자!!!

오늘의 잘한 점

• 스스로를 리프레쉬한 점

오늘의 아쉬운 점

• 없다.

참고

• useEffect