🎄 성장일지 4.0

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

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

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

🔑 오늘의 학습 키워드

• 렌더링
• 자식 컴포넌트 간 상태전달

1. 렌더링 시 동일한 html을 할당하고 다시 이벤트를 붙이는 식으로 해서 setState가 일어날 때마다 렌더링이 일어나게 했어야했나..?

사실 이 방법으로 하려다가 template 태그를 사용하면서 innerHTML로는 자식 html만 가져올 수 있게 되어 이렇게 하지 않았다. 그러다 outerHTML이라는 게 있다는 걸 알게 되어서... 다음에 바닐라로 이런 렌더링을 구현할 일이 생긴다면 setState 때마다 다시 html을 할당하고 이벤트들을 붙여주는 식으로 진행해봐야겠다. 지금 변경하자니 너무 많은 로직들에 손이 가야한다 🥺(혹은 미션 mvp 구현 후에 리팩토링하는 식으로 해보자)

2. 자식 컴포넌트 간 상태전달

저번에 계속 고민하고 고민하던 부분... 주말동안에도 이 부분 때문에 내내 고민했다. 일단은 지금 현재 코드에서 render()가 될 때마다 새로운 html을 할당하지는 않으니 전달하고 싶은 state를 부모의 state로 빼준 뒤에, 그 state를 변경하는 이벤트 핸들러를 서로 상태를 변경하길 원하는 자식 컴포넌트에게 전달한다. 그러고 나서 이벤트에 따라 전달받은 setState로 부모의 상태를 바꿔주고 부모의 view에서 자식 컴포넌트들을 변경시켜주는 로직을 작성하여 해결했다. 이게 element를 그대로 유지한다는 장점이 있지만, setState때마다 새로운 html이 렌더링되고 변경사항이 적용되는 리액트와는 조금은 다른 모습같아서 아쉽다. 다음에는 render() 시 동일한 html을 할당하고 이벤트를 붙이는 함수들도 실행함으로써 정말 리액트처럼 state 변경 시마다 알아서 모든 dom이 렌더링되게 구현해봐야겠다.

undefined